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时应用转换。 提前谢谢你。
答案 0 :(得分:2)
$(".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;
描述:显示或隐藏匹配的元素。
答案 1 :(得分:1)
您可以使用其他技术隐藏元素,例如应用否定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>