-1

这是我的html代码：

<div class="floor">
    <div id="article">
        <h2>TextFirst</h2>
        <img src="pic1.jpg" />
        </div>
    </div>
    <div id="article">
        <h2>TextSecond</h2>
        <img src="pic2.jpg" />
        </div>
    </div>
    <div id="article">
        <h2>TextThird</h2>
        <img src="pic3.jpg" />
        </div>
    </div>
</div>

现在我想用 JQuery 做到这一点：当鼠标悬停在确切的 #article 的图像上时，相同的 #acticle 的 h2 会消失。我怎样才能做到这一点？

这是我的 JQuery 代码：

$('.floor #article img').hover(function() {
    $(this - 'img' + 'h2').stop(true, false).animate({color: '#4099FF'}, $animatespeed);
}, function() {
    $(this - 'img' + 'h2').stop(true, false).animate({color: '#000000'}, $animatespeed);
});

我知道这行不通，但这是我的想法，我如何才能完成它。请问有什么帮助吗？

4

2 回答 2

3

元素的第一个 ID 必须是唯一的，因此请使用 class 属性article（您有多个具有 id 的元素article）

<div class="floor">
    <div class="article">
         <h2>TextFirst</h2>
        <img src="pic1.jpg" />
    </div>
</div>
<div class="article">
     <h2>TextSecond</h2>
    <img src="pic2.jpg" />
</div>
<div class="article">
     <h2>TextThird</h2>
    <img src="pic3.jpg" />
</div>

那么你的选择器是错误this的，事件处理程序内部是一个dom引用，所以你不能将它用于字符串连接，h2你正在寻找的元素是悬停元素的兄弟元素，所以你可以使用.sibling()如下所示

$('.floor .article img').hover(function() {
    $(this).siblings('h2').stop(true, false).animate({color: '#4099FF'}, $animatespeed);
}, function() {
    $(this).siblings('h2').stop(true, false).animate({color: '#000000'}, $animatespeed);
});
于 2013-10-02T14:42:24.957 回答
1

您的 html 是错误的 -</div>每个 div#article. 您不能将 jquery 处理程序绑定到具有相同 id 的多个元素（仅绑定第一个填充）-> 改用类

<div class="floor">
    <div class="article">
        <h2>TextFirst</h2>
        <img src="pic1.jpg" />
    </div>
    <div class="article">
        <h2>TextSecond</h2>
        <img src="pic2.jpg" />
    </div>
    <div class="article">
        <h2>TextThird</h2>
        <img src="pic3.jpg" />
    </div>
</div>

你的 jquery 选择器是错误的使用这样的东西。

$('.floor .article img').hover(function() {
    $(this).siblings('h2').fadeOut();
}, function() {
    $(this).parent().find('h2').fadeIn();
});
于 2013-10-02T14:52:28.717 回答