实现如下效果：当鼠标经过 会出现蒙层 并且有对应需求
思路：蒙层采用定位 鼠标经过给蒙层元素display设置为'block' 鼠标移开display设置为'none' ,具体看代码
这是渲染的图片和蒙层
<div
class="main-img"
@mouseenter="handleImgMouseenter(i)"
@mouseleave="handleImgMouseleave(i)"
>
<img src="../../common/assets/image/viewSwitch/viewSwitch-test.png" />
<div class="img-mask">
<div class="mask-collection">
<i
class="el-icon-star-off"
v-if="!item.isCollected"
@click="handleCollect(i)"
></i>
<i
class="el-icon-star-on"
v-if="item.isCollected"
@click="handleCancelCollect(i)"
></i>
</div>
<div class="mask-share">
<img
src="../../common/assets/image/viewSwitch/viewSwitch-share.png"
@click="handleShare(i)"
/>
</div>
<div class="mask-views">
<i class="el-icon-view"></i>{{ item.viewCount }}
</div>
</div>
</div>
View Code
然后就是鼠标移入移出事件
1 handleImgMouseenter(i) {
2 let imgMaskHtml = document.getElementsByClassName("img-mask")[i];
3 imgMaskHtml.style.display = "block";
4 },
5 handleImgMouseleave(i) {
6 let imgMaskHtml = document.getElementsByClassName("img-mask")[i];
7 imgMaskHtml.style.display = "none";
8 },
View Code
然后就是采用定位
标签：style,vue,鼠标,imgMaskHtml,蒙层,收藏,getElementsByClassName,display From： https://www.cnblogs.com/tanyy/p/17123717.html