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