jQuery蒙层框横向跟随
演示效果:
jQuery蒙层框鼠标横向跟随
HTML代码:
<div class="followList">
<div class="item">
<img src="img/img10.jpg" />
</div>
<div class="item">
<img src="img/img13.jpg" />
</div>
<div class="item">
<img src="img/img12.jpg" />
</div>
<div class="itembg"></div>
</div>
jQuery:
$(function(){
$('.item').mouseenter(function(e){
var index = $(this).index();
var boxwidth=$(".item").width();
$('.itembg',$(this).parent()).css({'left':index*boxwidth + 'px'});
});
})
css:
/* 蒙层跟随 */
.followList{width: 1100px;margin: 200px auto 0;display: flex;display: -webkit-flex;position: relative;}
.followList .item{width: calc(100% / 3);box-sizing: border-box;position: relative;overflow: hidden;}
.followList .item img{display: block;width: 100%;object-fit: cover;}
.followList .itembg{position: absolute;width: calc(100% / 3);height: 100%;box-shadow: 0 0 15px #ececec;top: 0;left: 0;transition: all 1s;border-bottom: 3px solid #DC2924;box-sizing: border-box;background-color: rgba(0,0,0,0.3);filter: invert(1);}
.followList .item.now img{filter: none;}