[英]How to make hover effect to show elements in a div using Javascript
So I'm new to javascript and i have been trying to write a programme that changes the opacity of a div and shows it's hidden 'p' element . 因此,我是javascript新手,我一直在尝试编写一个可更改div的不透明度并显示其隐藏的'p'元素的程序。 But when i hover the div the hidden 'p' elements in the other div appear.How do i make the 'p' element show only in the hovered div ?.
但是当我将div悬停时,另一个div中隐藏的'p'元素就会出现。如何使'p'元素仅在悬停的div中显示? Please any suggestion/advice will be appreciated.
请任何建议/建议将不胜感激。 Thanks
谢谢
HTML 的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 Java脚本
$(document).ready(function(){
$('.word').hide();
$('.description').hover(function(){
$(this).fadeTo('fast',0.6);
$('.word').show();
});
$('.description').mouseleave(function(){
$('.description').fadeTo('fast',1);
$('.word').hide();
});
});
You want to find the .word
elements that are in that particular div,so you would use $(this).find()
您想查找该特定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();
});
});
or more succinctly 或更简洁
$(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();
});
});
Also your img tags are wrong. 另外,您的img标签是错误的。 You mean
<img src="image.jpg" style="height: 330px; width: 220px">
您的意思是
<img src="image.jpg" style="height: 330px; width: 220px">
You want to get the child p.word
element of $(this)
in both cases: 在两种情况下,您都希望获得
$(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();
});
});
Keep in mind that if the css of .words
is visibility : hidden
and not display : none
you'll need to to change .show()
and .hide()
to: 请记住,如果的CSS
.words
是visibility : hidden
,而不是display : none
你需要改变.show()
和.hide()
到:
// show
$(this).find('p.words').css('visibility', 'visible');
// hide
$(this).find('p.words').css('visibility', 'hidden');
Working example: 工作示例:
$(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>
您必须使用: $( '.description > .word ')
来获得孩子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.