Question

我遇到了jquery和css的问题，也许有些人可以帮助我:) 这是我的HTML代码：

<html>
<head>
//myscripts
<script>
$(document).ready(function(){
    $(".cover").hover(function(){
        //the function i need to write
    });
});
</script>
</head>
<body>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
</body>
</html>

当光标放在图像上时，详细类（封面父类的子节点）应该淡入。当用户将光标移动到详细信息框上时，此框不应消失。请帮帮我，谢谢！

Answer 1

你可以这样做：

$(".cover").mouseover(function()
    {        $(this).next().fadeIn();
    }).mouseout(function()
    {

       $(this).next().fadeOut();
    });

Answer 2

我建议使用纯CSS解决方案。的 http://jsfiddle.net/borglinm/XN5uu/2/

当.detail元素悬停时，它使用相邻的兄弟选择器来获取.cover元素。它具有令人惊讶的良好浏览器支持（IE7 +）： Support table

.detail { opacity: 0; transition: opacity 1s; } .cover:hover + .detail { opacity: 1; }

Answer 3

您可以使用：

1） .hover() 来处理鼠标何时进入和离开元素。

2） .next() 找到元素的下一个直接兄弟。

3） .fadeToggle() 在淡入和淡出之间切换

$(".cover").hover(function(){
    $(this).next().stop().fadeToggle();
});

<强> Fiddle Demo

Answer 4

hover()函数使用两种方法来鼠标输入＆amp;另外两只老鼠离开。＆安培;使用closest()在父块中查找。

    $(".cover").hover(function(){
       $(this).closest('.card').find('.detail').fadeIn();
    },function(){
       $(this).closest('.card').find('.detail').fadeOut();
    });

Answer 5

你只能使用css

.card {
    opacity:0
}

.cover:hover .card{
    opacity:1;
    animation-delay:2s;
}

鼠标悬停在图像上

5 个答案: