jQuery fadeIn 和 fadeOut 元素的兄弟

Question

我想制作一个特定的 div(特定元素的第一个兄弟元素)淡入并最终在鼠标悬停/鼠标移出另一个 div 时淡出。 应该褪色的 div 恰好位于另一个之上。 我使用 $(document).ready() 成功地设计了一个元素的代码，但我想在侧面添加更多淡入淡出的元素，我不想一次显示它们，所以我不得不修改函数。

函数代码如下:

function clenShow() {
    $(this).next().fadeIn(1000);
}
function clenHide() {
    $(this).next().fadeOut(1000);
}

这是 HTML:

<a class="clenove" onMouseOver="clenShow()" onMouseOut="clenHide()" href="page1.html" title="">
   <div class="clenovePhoto">
   </div>
   <div class="clenoveText">
      <h2>Head text</h2>
      <p>Content text...</p>
   </div>
</a>
<a class="clenove" onMouseOver="clenShow()" onMouseOut="clenHide()" href="page2.html" title="">
   <div class="clenovePhoto">
   </div>
   <div class="clenoveText">
       <h2>Head text #2</h2>
       <p>Content text #2</p>
   </div>
</a>

应该淡入淡出的元素是类为“clenoveText”的元素 有人知道一些简单的解决方案吗？

Answer 1

一个好的方法是为悬停元素使用一个类，为兄弟元素使用一个相对选择器:

<img class="hover" src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />

$('.hover').hover(function() {
    $(this).next().fadeOut();
}, function() {
    $(this).next().fadeIn();
});

Demo

请注意，这种方式的标记中没有 JavaScript，这是最佳做法。