CODEWITHSUNDEEP
javascriptjqueryhtml
N.sean
N.sean

Reputation: 11

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

Upvotes: 0

Views: 182

Answers (3)

wahwahwah
wahwahwah

Reputation: 3177

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>

Upvotes: 0

Popnoodles
Popnoodles

Reputation: 28419

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

Upvotes: 1

Mohammadreza Yektamaram
Mohammadreza Yektamaram

Reputation: 1514

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

Upvotes: 0

Related Questions