Question

我有下面的标签结构。这在页面上重复9次。我想要的是，当我将鼠标悬停在9'itemInfo'div中的一个上时，它会将所有文本颜色更改为白色（包括链接）。如何使用jQuery选择所有这些？请参阅下面的我的尝试。

<div class="row itemInfo">
    <div class="row">
        <div class="twelve columns itemImage">
            <img src="http://lorempixel.com/250/185/abstract/">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="twelve columns itemDetails"> 
            <h3><a href="#">title</a></h3>
            <p class="quiet">submitted by <a href="#">designer</a></p>                   
        </div>
    </div>
</div>

我的尝试：

$(".itemInfo").hover(function() {
    $(this).find('h3 a').addClass('itemInfoActive');
    $(this).find('p').addClass('itemInfoActive');
    $(this).find('p a').addClass('itemInfoActive');
    return false;

Answer 1

$(".itemInfo").mouseenter(function() {
    $('a,p,h3',this).addClass('itemInfoActive');
});

Answer 2

您可以使用通用选择器：

$(".itemInfo").hover(function() {    
    $(this).find('*').addClass('itemInfoActive');
});

Answer 3

选中工作演示 http://jsfiddle.net/E8uws/ 或使用mouseout或mouseover =＆gt; http://jsfiddle.net/yUf4Q/

如果您想阅读更多内容：http://api.jquery.com/category/selectors/

休息应该有助于您的需求:) 代码

$(function() {
    $(".itemInfo").hover(function() {
            $(this).parent().find('*').css('color', 'red');
    });
});

额外代码

$(function() {
    $(".itemInfo").mouseover(function() {
        $(this).parent().find('*').css('color', 'red');
    }).mouseout(function() {
        $(this).parent().find('*').css('color', 'black');

    });
});

选择div中的所有标签

3 个答案: