jQuery蒙层框鼠标横向跟随

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;}