How to make hover effect to show elements in a div using Javascript

Question

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 . 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 ?. Please any suggestion/advice will be appreciated. Thanks

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();
 }); 
});  

Answer 1

You want to find the .word elements that are in that particular div,so you would use $(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. You mean <img src="image.jpg" style="height: 330px; width: 220px">

Answer 2

You want to get the child p.word element of $(this) in both cases:

$(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:

// 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> 

Answer 3

您必须使用： $( '.description > .word ')来获得孩子。