JAVASCRIPT/JQuery如何在一次以上的时间内执行

JAVASCRIPT / JQuery How execute onmouveover 1 time

本文关键字：一次 时间 执行 JQuery JAVASCRIPT      更新时间：2023-09-26

当鼠标悬停在li元素上时，我试图显示一个弹出窗口。

我的弹出窗口有一个动画（随着淡出而可见，向上，然后向下）

问题是，当鼠标在li上时，我的弹出窗口的动画似乎处于无休止的循环中。

我得到了很多li元素，我做了一个过程给它们自动的ID，在"for"循环中传递它们。

我的代码重要编辑抱歉

echo"<li id='".$li_id_name.$li_id."' onmouseover='showpopup(this)'>";
    echo"<div id='".$li_id_name.$li_id."detail'>SOME TEXT</div>";
echo"</li>";

Javascript/jQuery

function showpopup(obj) {
 d3.select('#'+$(obj).attr('id')+"detail").transition().duration(100).style('opacity','1').each('end', function() {
        d3.select('#'+$(obj).attr('id')+"detail").transition().duration(100).style('margin-top','-300px').each('end', function() {
            d3.select('#'+$(obj).attr('id')+"detail").transition().duration(500).style('margin-top','-250px');
        });
    });
}

对不起，我在代码中犯了一个错误，事实上，弹出窗口是li元素中的一个div

只使用mouseenter而不是mouseover

htmlLI1 LI2 LI3 js

$('.assignenter').mouseenter(function(){
//What to do..
});

试试这个http://jsfiddle.net/V3xw8/

像这样尝试

HTML:

<ul>
    <li class="assignenter">LI1</li>
    <li class="assignenter">LI2</li>
    <li class="assignenter">LI3</li>
</ul>

CSS：

.assignenter{
    display:block;
    padding:20px;
    background:green;
    color:#fff;
}

jQuery/JS

$("li.assignenter").on( "mouseenter", function() {
  $(this).css({
     "background-color": "red",
      "font-weight": "bolder"
  });
}).on( "mouseleave", function() {
       var styles = {
                      backgroundColor : "green", 
                      fontWeight: ""
                     };
$(this).css( styles );
});

希望这将解决您的问题

相关文章：