Question

我想做一些事情，当我将鼠标悬停在div的每个img上时，显示该主div的div。我试过这个但是当你将鼠标悬停在每个img上时，所有div都会淡入。 “显示与其img相关的每个div”

<script type="text/javascript">
$(document) .ready(function(){
   $(".circles") .hover(function(){
      $(".circles div") .fadeIn();
   }, function(){
       $(".circles div") .fadeOut();
   });
});
</script>
        <div id="circle">
          <div class="circles">
             <img src="images/bill.jpg" alt="anonymous" width="200px" height="200px" />
         <div id="des1">biill<br />Apple</div>
      </div>
            <div class="circles">
             <img src="images/apple.jpg" alt="apple" width="200px" height="200px" />
         <div id="des2">Apple<br />Steve</div>
        </div>
            <div class="circles">
             <img src="images/windows.jpg" alt="windows" width="200px" height="200px" />
         <div id="des3">steve<br />Bill</div>
        </div>
         </div>

和css：

#circle {
    width:640px;
    padding:5px;
    height:210px;
    margin-top:20px;
}
.circles {
    width:200px;
    height:200px;
    border-radius:400px;
    float:left;
    background:#aaa;
    margin:5px;
    position:relative;
}
.circles img {border-radius:400px;}
.circles div {
    background:url(images/circle_p.png) repeat;
    width:200px;
    height:170px;
    border-radius:400px;
    text-align:center;
    position:absolute;
    right:0;
    top:0;
    padding:30px 0 0 0;
    font:30px arial;
    line-height:70px;
    display:none;
    color:#fff;
}

Answer 1

使用此 .for当前所选元素

$(document).ready(function(){
   $(".circles") .hover(function(){
      $(this).find("div").fadeIn();
   }, function(){
        $(this).find("div").fadeOut();
   });
});

Answer 2

使用$(this)获取当前对象

$(document).ready(function(){
   $(".circles") .hover(function(){
      $(this).find(" div").stop().fadeIn();
   }, function(){
        $(this).find("div").stop().fadeOut();
   });
});

Answer 3

纯CSS解决方案怎么样？ Demo

.circles div {
    opacity: 0;
    transition: all 1s;
}
.circles:hover div {
    opacity: 1;    
}

在徘徊时淡入每个div的每个子div

3 个答案: