Question

我知道使用CSS，将鼠标悬停在一个元素上不能改变嵌套在给定元素中的元素的属性。所以，我一直在使用jquery来改变嵌套在给定元素中的元素的属性。我的代码如下：

<?php
    for($i=0;$i<$count;$i++)
    {
?>   
   <tr>
       <td>Sample</td>
       <td>Text</td>
   </tr>
<?php
    }
?>
<script type="text/javascript">
    $(document).ready(function(){

   $('tr').each(function(index) {
        $(this).hover(function() {  
            $(this).css("color", "#ffffff");    
            $(this).css("background-color", "#0080ff");
        });

        $(this).mouseout(function() {   
            $(this).css("color", "#222222");
            $(this).css("background-color", "#f0f0f0"); 
        });
    });
});
</script>

问题是，一旦我将鼠标悬停在标签上，我就会触发鼠标移动操作，并且字体颜色正在切换回＃222222，我希望它只要我徘徊在标签或其中的任何内容，行的背景颜色设置为＃0080ff，字体颜色设置为#ffffff。有什么建议吗？

Answer 1

我认为您可以使用CSS定位要悬停的对象内的元素。

在你的情况下：

tr {
    color: #222;
    background-color: #f0f0f0;
}

tr:hover {
    color: #fff;
    background-color: #0080ff;
}

这里是jsfiddle

看起来你的javascript正在做什么 - 改变CSS属性。我能正确地解释你的问题吗？

Answer 2

您应该使用hover()的第二个参数。您的代码应如下所示：

$('tr').each(function(index) {
        $(this).hover(function() {  
            $(this).css("color", "#ffffff");    
            $(this).css("background-color", "#0080ff");
        }, function(){   
            $(this).css("color", "#222222");
            $(this).css("background-color", "#f0f0f0"); 
        });
});

Answer 3

您需要mouseleave，因为只有当鼠标完全在元素之外时才会触发，而不是在元素子元素上触发。所以

$(this).mouseout(...)

应该是

$(this).mouseleave(...)

或者你可以简单地做

$('tr').each(function(index) {
    $(this).hover(function() {  
        $(this).css("color", "#ffffff");    
        $(this).css("background-color", "#0080ff");
    }, function() {   
        $(this).css("color", "#222222");
        $(this).css("background-color", "#f0f0f0"); 
    });
});

实际上将第一个函数绑定为mouseenter处理程序，第二个函数绑定为mouseleave处理程序。

jQuery on hover addClass

3 个答案: