父母徘徊时如何淡化儿童div

Question

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

我希望当我将鼠标悬停在特定的ordershape上时，我想要显示我的父母徘徊的应对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

＆＃13;

＆＃13;

.fad-res{
  display:none;
}

.ordershape{
  height:30px;
  width:30px;
  background-color:yellow;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果你想用jquery这样做，就这样做。

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

演示jQuery

＆＃13;

＆＃13;

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

＆＃13;

.fad-res{
  display:none;
}

.ordershape{
  height:30px;
  width:30px;
  background-color:yellow;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>