如何使用Javascript制作悬停效果以显示div中的元素
如何使用Javascript制作悬停效果以显示div中的元素
提问于 2015-10-01 04:34:15
所以我是javascript的新手，我一直在尝试编写一个程序来改变div的不透明度，并显示它隐藏的'p‘元素。但是，当我将appear.How悬停在另一个div div中隐藏的'p‘元素时，我是否使'p’元素只在悬停的div中显示？请提出任何建议/建议，我们将不胜感激。谢谢
HTML
<div class = "description">
<a><img src="image.jpg" height = 330px width = 220px></a>
<p class = "word"> image description</p>
</div>
<div class = "description">
<a><img src="image.jpg" height = 330px width = 220px></a>
<p class = "word"> image description</p>
</div>Javascript
$(document).ready(function(){
$('.word').hide();
$('.description').hover(function(){
$(this).fadeTo('fast',0.6);
$('.word').show();
});
$('.description').mouseleave(function(){
$('.description').fadeTo('fast',1);
$('.word').hide();
});
}); Stack Overflow用户
发布于 2015-10-01 04:45:52
您希望查找该特定div中的.word元素，因此可以使用$(this).find()
$(document).ready(function(){
$('.word').hide();
$('.description').hover(function(){
$(this).fadeTo('fast',0.6);
$(this).find('.word').show();
});
$('.description').mouseleave(function(){
$(this).fadeTo('fast',1);
$(this).find('.word').hide();
});
}); 或者更简洁地说
$(document).ready(function(){
$('.word').hide();
$('.description').hover(function(){
$(this).fadeTo('fast',0.6).find('.word').show();
}).mouseleave(function(){
$(this).fadeTo('fast',1).find('.word').hide();
});
}); 而且你的img标签也是错误的。你是说<img src="image.jpg" style="height: 330px; width: 220px">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32875129
复制相关文章
相似问题
腾讯云开发者
