javascript - 如何在悬停图像时使某个 div 可见？

Question

<div class="parent">
   <div class="parent.child">
      <a href="#"></a>
      <div class="parent.chil.child">
          <div class="parent.chil.child.child">
               <img src ="link0" >
               <img src ="link1" >
               <img src ="link2" >
          </div>
      </div>
   </div>
   <h4>
      <a href= "aspPage.aspx">text</a>
   </h4>
   <div class="imgClass0">
       <p>some text</p>
    </div>
   <div class="imgClass1">
       <p>some text</p>
    </div>
   <div class="imgClass2">
       <p>some text</p>
</div>

大家好!

我有一个问题。我有一个 div，其中可以有一个或多个 <img>节点，取决于服务器如何生成 DOM(可以有一个或多个，取决于数据库中的数字。有几个<div> <h4> 下的元素节点，它们的数量等于<img>的数量上面的元素。

我需要帮助制作一个让“imgClass1”在我悬停时可见的 javascript <img src ="link1" > , 另一个imgClassX, X=(1..n) 不可见，等等。我给他们默认可见性 display:none ，但我需要 imgClass0 具有默认值 visibility:visible.

最好的问候，乌斯马尔。

Answer 1

您可以属性starts with选择器以及 :eq()选择器:

$('img[src^=link]').hover(function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').show();
}, function() {
    var idx = $(this).index();
    $('div[class^="imgClass"]:eq(' + idx + ')').hide();
});

Fiddle Demo