如何使用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();
});
}); 回答 3
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用户
发布于 2015-10-01 04:48:05
在这两种情况下，您都希望获得$(this)的子元素p.word：
$(document).ready(function () {
$('.word').hide();
$('.description').hover(function () {
$(this).fadeTo('fast', 0.6);
$(this).find('p.words').show();
});
$('.description').mouseleave(function () {
$(this).fadeTo('fast', 1);
$(this).find('p.words').hide();
});
});请记住，如果.words的css是visibility : hidden而不是display : none，则需要将.show()和.hide()更改为：
// show
$(this).find('p.words').css('visibility', 'visible');
// hide
$(this).find('p.words').css('visibility', 'hidden');工作示例：
$(document).ready(function () {
$('.word').hide();
$('.description').hover(function () {
$(this).fadeTo('fast', 0.6);
$(this).find('p.words').show();
});
$('.description').mouseleave(function () {
$(this).fadeTo('fast', 1);
$(this).find('p.words').hide();
});
});.words{
display: none;
}
.description{
padding: 20px;
border: solid 2px steelblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
<p class="words">image description</p>
</div>
<div class="description">
<p class="words">image description</p>
</div>
<div class="description">
<p class="words">image description</p>
</div>
<div class="description">
<p class="words">image description</p>
</div>
<div class="description">
<p class="words">image description</p>
</div>
Stack Overflow用户
发布于 2015-10-01 04:36:02
您必须使用：$( '.description > .word ')来获取子级。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32875129
复制相关文章
相似问题
腾讯云开发者
