javascript - 鼠标悬停在图片上

标签 javascript jquery html css

我在使用 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>

当光标放在图像上时,细节类(封面父类的子类)应该淡入。 当用户将光标移到详细信息框上时,此框不应消失。 请帮助我,谢谢!

最佳答案

您可以使用:

1) .hover() 在您的鼠标进入和离开元素时进行处理。

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

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

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

Fiddle Demo

关于javascript - 鼠标悬停在图片上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22526418/

相关文章:

javascript - 单击后隐藏加一个按钮

javascript - 如何检测网页上未正确加载/完成的图像?

jquery - 如何选择两个相同标签之间的所有内容?

php - 如何为 CubeCart 设置模板?

javascript - 我的普通 JSONP 的回调范围是什么

javascript - 使用 D3.JS 将 CSV 转换为 JSON

javascript - 错误 : this. state.joblistings.map 不是 ReactJS 中的函数

javascript - 为什么 Array.prototype.reduce() 不将空数组作为累加器?

javascript - 如何检查 foreach 函数中的条件是否与 Javascript 匹配?

html - SCSS 下拉悬停菜单