Question

我的菜单包含不同的名称，每当用户将鼠标悬停在其中一个<li>元素上时，我就会尝试淡入/淡出不同的图像。每个<li>元素都连接到不同的id，以便为特定的人淡化正确的图像。问题是淡入和淡出适用于特定<ul>元素下的所有<li>元素。你知道我怎么解决这个问题吗？

JavaScript的：

<script>
    $(document).ready(function() {
$("#pau").mouseover(function(){
    $("#paup").fadeIn(600);
});
$("#pau").mouseout(function(){
    $("#paup").fadeOut(600);
});
$("#red").mouseover(function(){
    $("#redp").fadeIn(600);
});
$("#red").mouseout(function(){
    $("#redp").fadeOut(600);
});\
});
</script>

HTML：

<div class='people'>
        <nav>
                <ul>
                    <li><div id="red">Redpoppy Stories</div>
                        <ul>
                            <li><a href="http://www.redpoppystories.com" target="_blank" >Blog</a></li>
                            <li><a href="https://www.facebook.com/redpoppystories" target="_blank" >Facebook</a></li>
                            <li><a href="https://instagram.com/redpoppyzuz/" target="_blank" >Instagram</a></li>
                            <li><a href="#">Vimeo</a></li>
                        </ul>   
                    </li>
                </ul>
                <ul>
                    <li id="pau"><div>Paulinemma</div>
                        <ul>
                            <li><a href="http://www.diamondandunicorn.com" target="_blank" >Blog</a></li>
                            <li><a href="https://www.facebook.com/paulinemma" target="_blank" >Facebook</a></li>
                            <li><a href="https://instagram.com/paulinemma/" target="_blank" >Instagram</a></li>
                            <li><a href="#">Vimeo</a></li>
                        </ul>
                    </li>
                </ul>
</nav>
</div>

非常感谢您的评论。

Answer 1

将mouseover更改为mouseenter，将mouseout更改为mouseleave，因此将鼠标移到子项上不会导致重新触发事件。

Answer 2

如果我理解正确，当你用文本“Redpoppy Stories”鼠标悬停在div上时你希望它淡入，但是当你将鼠标悬停在下面的列表项目时，文本“Blog”，“Facebook”和“Instagram”时不会。

首先在第二个菜单组中，列表项上的id ='pau'而不是包含文本的div。我也会使用jquery hover（）方法而不是mouseover和mouseout。悬停方法采用参数。第一个是悬停开始时运行的功能。第二个是悬停结束时运行的功能。

$scope.editPost = function(id) {

    var ref = new Firebase("https://FIREBASESOURCE.firebaseio.com/Posts/" + id);
    var id = ref.key();

     var syncObject = $firebaseObject(ref);
    $scope.postToUpdate = syncObject;
      console.log($scope.postToUpdate.$id);
     // triggers the modal pop up
    $('#editModal').modal();
}

看到这个小提琴：http://jsfiddle.net/0o724b6b/

使用<li>悬停的Javascript图像

2 个答案: