0

我有下面的标签结构。这在页面上重复 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;
4

3 回答 3

0

看看这个工作演示 http://jsfiddle.net/E8uws/ 或使用mouseoutor mouseover=> 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');

    });
});​
于 2012-10-29T09:29:45.617 回答
0 
$(".itemInfo").mouseenter(function() {
    $('a,p,h3',this).addClass('itemInfoActive');
});
于 2012-10-29T09:25:19.710 回答
0

您可以为此使用通用选择器：

$(".itemInfo").hover(function() {    
    $(this).find('*').addClass('itemInfoActive');
});
于 2012-10-29T09:26:57.103 回答