javascript - Javascript - 在图片的两个区域,如何使鼠标悬停?

77 4

如何在图片上进行悬停选择?


.masthead {



 border-bottom: 10px solid #fff;


 border-top: 10px solid #fff;


 position: relative;



}


.img-overlay {


 width: 100%;


 height: 100%;


 background: rgba(0, 0, 0, 0.39);


}


.winter {


 width: 100%;


 height: 100%;


 top: 0;


 position: absolute;


 clip-path: polygon(0 0, 64% 0, 35% 100%, 0 100%)


}


.winter:hover {


 background-color: #fff;


 opacity: 0.3;


}


.sum {


 width: 100%;


 height: 100%;


 top: 0;


 position: absolute;


 clip-path: polygon(58% 0, 100% 0, 100% 100%, 0% 100%);


}


.sum:hover {


 background-color: #fff;


 opacity: 0.3;


}

<div class="container-fluid">


 <div class="row">


 <div class="col-12 masthead px-0">


 <img src="https://i.ibb.co/ChQYMMG/bg-sum-win.jpg">


 <div class="winter"></div>


 <div class="sum"></div>


 <div class="img-overlay"></div>


 </div>


 </div>


 </div>

时间: 原作者:

148 2

请检查此代码段。

你可以使用绝对位置div,并在它们上方触发。


.myimage {


 width: 300px;


 height: 300px;


 position: relative;


}


.face {


 width: 60px;


 height: 90px;


 border: 1px solid black;


 top: 70px;


 left: 70px;


 position: absolute


}


.hat {


 width: 40px;


 height: 40px;


 border: 1px solid red;


 top: 20px;


 left: 100px;


 position: absolute


}


.foot {


 width: 60px;


 height: 90px;


 border: 1px solid green;


 top: 110px;


 left: 200px;


 position: absolute


}


img {


 width: 100%;


 height: 100%;


}


.face:hover {


 background-color: red;


}


.hat:hover {


 background-color: blue;


}


.foot:hover {


 background-color: green;


}

<div class='myimage'>


 <img src='http://i.imgur.com/eI8ijAl.jpg?1' />


 <div class='face'></div>


 <div class='hat'></div>


 <div class='foot'></div>


</div>

原作者:
...