CODEWITHSUNDEEP
javascriptjqueryhideshoweffect
Simo Patrek
Simo Patrek

Reputation: 113

Fade Out/In Divs On Hover

Please I Want To Hover On specific Div And when i so it , just the specific hide the shown side and the other show , but the problem is that all the divs hidden and shown in same time .

$(".service").on('mouseover', function () {  
    $(".face1").fadeOut();
    $(".face2").fadeIn();
});
$(".service").on('mouseout', function () {
    $(".face2").fadeOut();
    $(".face1").fadeIn();
});

Here Is The Demo : https://codepen.io/abcari/pen/JMjjow

Upvotes: 0

Views: 760

Answers (1)

Colin Cline
Colin Cline

Reputation: 1279

You most use $(this) to prevent all element with same class name .face1 and .face2 to act same and also prevent from affection by same event.

Jquery:

$(".service").on('mouseenter', function () {

    $(this).find(".face1").fadeOut();
    $(this).find(".face2").fadeIn();

});

$(".service").on('mouseleave', function () {

    $(this).find(".face2").fadeOut();
    $(this).find(".face1").fadeIn();

});

Article about $(this)

An update based on OP ask:

CSS:

.service .face2 {position:absolute;top:50%;left:50%;display:none;transform:translate3d(-50%,-50%,0);text-align:center;}

Add this in very last line in your css file. jsfiddle (is just for transition purpose)

Upvotes: 2

Related Questions