简体   繁体   中英

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

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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM