gpt4 book ai didi

javascript - 鼠标悬停在图片上

转载 作者:太空宇宙 更新时间:2023-11-04 14:17:14 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com