javascript - 如何在父项悬停时淡化子项 div

Question

我有一个类名 ordershape 的 div，它包含另一个 div fad-res。

我希望当我将鼠标悬停在特定的 ordershape 上时，我想显示相应的 fad-res 我悬停在其父 div 上，而其他 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>