我想在将鼠标悬停在 a 标签上时打开一个 div。我可以用 css 来做到这一点,但我想对那个 div 应用淡入和淡出。我做不到。
<a href="#">
<img src="img/detayaltresim1.jpg" alt="">
<div></div>
</a>
div{
position: absolute;
width: 200px;
height: 80px;
background: #000;
bottom: 46px;
left: -78px;
z-index: 2;
display:block;
}
a{
display: block;
position: relative;
}
a:hover div {
display:block;
}
我的 a 标签有父标签。我无法用 j-query 做到这一点。为什么?
<script>
$('urundetayisagteknik2 a').mouseover(function(){
//show the box
$(this).children('.urundetayisagteknik2 a div').stop().animate({opacity:1},300);
});
$('urundetayisagteknik2 a').mouseleave(function(){
//hide the box
$(this).children('.urundetayisagteknik2 a div').stop().animate({opacity:0},500);
});
</script>
最佳答案
你在 jquery 中的类名没有 .
可能是错误。
编辑如下:
$('.urundetayisagteknik2 a').mouseover(function(){
//show the box
$(this).children('.urundetayisagteknik2 a div').stop().animate({opacity:1},300);
});
或者您可以尝试以下方法
CSS
<style>
div{
position: absolute;
width: 200px;
height: 80px;
background: #000;
top: 46px;
left: 20px;
z-index: 2;
display:none;
}
a{
display: block;
position: relative;
}
</style>
HTML
<a class="link" href="#">
Link
<div></div>
</a>
JQuery
<script>
$('.link').mouseover(function(){
$('.link div').fadeIn();
});
$('.link').mouseleave(function(){
$('.link div').fadeOut();
});
</script>
关于jquery - 使用 jquery 淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21725672/