父母懸停時如何淡化子div

Question

我有一個具有類名稱ordershape的div，它包含另一個div fad-res 。

我希望當我將鼠標懸停在特定的ordershape ，我想顯示我懸浮其父div的相應fad-res ，而其他div必須隱藏。

<div class="ordershape">
    <div class="fad-res">1</div>
</div>
<div class="ordershape">
    <div class="fad-res">2</div>
</div>
<div class="ordershape">
    <div class="fad-res">3</div>
</div>

Answer 1

您的HTML無效，因為您尚未使用ordershape類關閉div

沒有理由為此使用jquery，CSS可以輕松實現：

.ordershape:hover .fad-res{
  display:block;
}

演示CSS

 .fad-res{ display:none; } .ordershape{ height:30px; width:30px; background-color:yellow; } .ordershape:hover .fad-res{ display:block; } 

 <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div> 

如果您想使用jquery做到這一點，請按照以下步驟操作。

$(".ordershape").mouseenter(function() {
  $(this).find(".fad-res").show();
}).mouseleave(function() {
  $(this).find(".fad-res").hide();
});

演示jQuery

 $(".ordershape").mouseenter(function() { $(this).find(".fad-res").show(); }).mouseleave(function() { $(this).find(".fad-res").hide(); }); 

 .fad-res{ display:none; } .ordershape{ height:30px; width:30px; background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div> 

Answer 2

請勿為此使用javascript-而是使用CSS transition和opacity屬性，使用:hover選擇器。

 .fad-res { -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; opacity: 0; background: #555555; height: 60px; width: 100px; } .ordershape { background: #f6f6f6; height: 100px; width: 100px; float: left; margin-right: 2px; } .ordershape:hover .fad-res { opacity: 1; } 

 <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div> 

Answer 3

好吧，你可以這樣嘗試jquery版本

 $(".ordershape").hover(function(){ $(this).find(".fad-res").toggle(); }) 

 .fad-res{ display : none; } .ordershape{ width : 20px; height: 20px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div>