jquery - 使用 jquery 淡入淡出

Question

我想在将鼠标悬停在 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>

Answer 1

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