CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alexandru
Alexandru

Reputation: 117

mouse hover on image

I'm having issues with jquery and css, maybe some of you can help me :)
Here is my html code :

<html>
<head>
//myscripts
<script>
$(document).ready(function(){
    $(".cover").hover(function(){
        //the function i need to write
    });
});
</script>
</head>
<body>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
<div class="card">
    <img class="cover" src="cover.png" />
    <span class="detail" style="display:none;">
        More details
    </span>
</div>
</body>
</html>

When the cursor is placed on the image, detail class(child of cover parent class) should fade in. When the user moves cursor over the detail box, this box should not dissapear. Please help me, thank you !

Upvotes: 2

Views: 123

Answers (5)

Felix
Felix

Reputation: 38112

You can use:

1) .hover() to handle when your mouse enter and leave an element.

2) .next() to find the next immediate sibling of an element.

3) .fadeToggle() to toggle between fade in and fade out

$(".cover").hover(function(){
    $(this).next().stop().fadeToggle();
});

Fiddle Demo

Upvotes: 2

rabar kareem
rabar kareem

Reputation: 630

You can do it using only css 

.card {
    opacity:0
}

.cover:hover .card{
    opacity:1;
    animation-delay:2s;
}

Upvotes: 0

Mathias
Mathias

Reputation: 5670

I would suggest a pure CSS solution. http://jsfiddle.net/borglinm/XN5uu/2/

It uses the adjacent sibling selector to get the .detail element when the .cover element is hovered. It has surprisingly good browser support (IE7+): Support table

.detail {
    opacity: 0;
    transition: opacity 1s; 
}
.cover:hover + .detail {
    opacity: 1;
}

Upvotes: 2

aedips
aedips

Reputation: 49

You can do like this:

$(".cover").mouseover(function()
    {        $(this).next().fadeIn();
    }).mouseout(function()
    {

       $(this).next().fadeOut();
    });

Upvotes: 2

demonofthemist
demonofthemist

Reputation: 4199

hover() function uses two methods one to mouse in & other two mouse leave. & use closest() to find in parent block. 

    $(".cover").hover(function(){
       $(this).closest('.card').find('.detail').fadeIn();
    },function(){
       $(this).closest('.card').find('.detail').fadeOut();
    });

Upvotes: 1

Related Questions