Question

我想在悬停在标签上时打开一个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;
}

我的标签有父母。我无法用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>

Answer 2

试试这个：

var a = $('.urundetayisagteknik2 a');
var div = a.find('div');

a.on({
    mouseover: function () {
        div.stop().animate({
            opacity: 1
        }, 300);
    },
    mouseleave: function () {
        div.stop().animate({
            opacity: 0
        }, 300);
    }
});

Answer 3

试试下面的剧本

        $( ".urundetayisagteknik2 a" ).hover(function() {
                $( this ).find( "div" ).stop( true, true ).fadeIn();
        }, function() {
                $( this ).find( "div" ).stop( true, true ).fadeOut();
        });

jQuery的hover（）函数可以用于此。触发mouseenter时调用第一个函数，触发mouseleave时调用第二个函数。请参阅API。

Answer 4

以下是jQuery的解决方案。

<强> HTML

<a href="#">
   This is a anchor tag
   <div class="dropDown">hidden div</div>
</a>

<强> CSS

.dropDown { display:none;}

<强>的jQuery

$('a').mouseover(function(){
    $(this).find('.dropDown').fadeIn();
}).mouseleave(function(){
    $(this).find('.dropDown').fadeOut();
});

Demo

Answer 5

喜欢这个

<强> demo

<强> CSS

#test {
    margin: 1.5em auto;
    width: 10em;
    height: 10em;
    background: gray;
}

<强> JS

var test = $('#test'),
    $in = $('#in'),
    out = $('#out'),
    toggle = $('#toggle'),
    to = $('#to');


$in.click(function() {
    test.fadeIn(1000, function() {
        alert('Complete');
    });
});


out.click(function() {
    test.fadeOut(1000, function() {
        alert('Complete');
    });
});


toggle.click(function() {
    test.fadeToggle(1000, function() {
        alert('Complete');
    });
});

to.click(function() {
    test.fadeTo(1000, 0.5, function() {
        alert('Complete');
    });
});

用jquery淡出淡出

5 个答案: