Question

我试图找出如何在li悬停后让所有元素在li元素中突出显示。

<ul class="category-box">
    <li>
         <h1><a>...</a></h1>
        <p class="meta">Lorem ipsom <a>...</a>
         <a>...</a>
        </p>
    </li>
</ul>

的jQuery

$('.category-box li').hover(function () {
    $(this).css('color', '#a58637');
},
function () {
    $(this).css('color', 'black');
});

Answer 1

你可以用直接的CSS

来做到这一点

.category li, .category li * {
    color: black;
}

.category li:hover, .category li:hover * {
    color: #A58637;
}

Answer 2

对于说教性的porpuse，测试它：

<style>
    .texthover {
        color: #ff0000 !important;
    }
    .textout {
        color: #000 !important;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("li").mouseover(function () {
            $(this).removeClass(".textout");
            $(this).addClass(".texthover");
        }).mouseout(function () {
            $(this).removeClass(".texthover");
            $(this).addClass(".textout");
        });
    });
</script>

当div悬停时，突出显示div中的所有元素

2 个答案: