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

422
November 21, 2016, at 9:48 PM

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

You must use: $( '.description > .word ') to get child.

Rent Charter Buses Company
READ ALSO
How to obtain value of textbox within jQuery Mobile Listview control

How to obtain value of textbox within jQuery Mobile Listview control

This is hopefully an easy question, but I'm getting the suspicion my design might need some more thought. I have a Listview control like such:.

311
Parse RSS feed with multiple &lt;link&gt; (jquery)

Parse RSS feed with multiple <link> (jquery)

I'm using jQuery to parse and output three RSS feeds into three different container divs. The first two feeds work fine, but I can't get the links to work in the third feed, the href isn't found at all.

256
Datatable warning: Requested unknown parameter &#39;id&#39; for row 276

Datatable warning: Requested unknown parameter 'id' for row 276

I have in total 276 rows in my datatable, where I could able to retrieve these from my datatbase using JQuery 1. 11.

676