0

当鼠标悬停在 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');
        });
    });

}

SORRY I DID A MISTAKE IN MY CODE, 实际上，弹出框是 li 元素内的 div

4

2 回答 2

1

只需使用 mouseenter 而不是 mouseover

html LI1 LI2 LI3 js

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

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

于 2013-07-31T16:06:23.630 回答
0

像这样试试

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 );

});

希望这能解决你的问题

于 2013-07-31T17:13:01.793 回答