Question

HTML

<div class="onediv"><a href="">text</a></div>
<div class="nextdiv">
 <p>testing testing testing testing testing testing testing testingtesting.
 </p>  
</div>

CSS

.nextdiv{display: none;}

JQUERY

$( ".onediv a" ).hover(function() {
 $('.nextdiv').css({'display' : 'block'});
});

$( ".onediv a" ).mouseleave(function() {
  $('.nextdiv').css({'display':'none'});
});

当我将鼠标悬停在文本上时，会显示.nextdiv。现在我想在显示.nextdiv时应用转换。提前谢谢你。

Answer 1

＆＃13;

$(".onediv").hover(function() {
  $(this).next('.nextdiv').toggle('slow')
});

＆＃13;

.nextdiv {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onediv"><a href="">text</a>
</div>
<div class="nextdiv">
  <p>testing testing testing testing testing testing testing testingtesting.
  </p>
</div>

<div class="onediv"><a href="">text1</a>
</div>
<div class="nextdiv">
  <p>text1 text1 text1 text1 text1 text1 text1 text1.
  </p>
</div>

<div class="onediv"><a href="">text2</a>
</div>
<div class="nextdiv">
  <p>text2 text2 text2 text2 text2 text2 text2 text2.
  </p>
</div>

＆＃13;

描述：显示或隐藏匹配的元素。

您可以使用.toggle()
将悬停移动到div而不是

Answer 2

您可以使用其他技术隐藏元素，例如应用否定display:none，以便在显示时转换生效，而不是使用z-index：

$(".onediv a").hover(function() {
  $('.nextdiv').addClass('show');
}, function() {
  $('.nextdiv').removeClass('show');
});

.nextdiv {
  position: absolute;
  z-index: -999;
  opacity: 0;
  transition: all 1s;
}
.show {
  position: static;
  z-index: 0;
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onediv"><a href="">text</a>
</div>
<div class="nextdiv">
  <p>testing testing testing testing testing testing testing testingtesting.
  </p>
</div>

如何在不同的块上悬停时使用css转换显示块？

2 个答案: