當我將滑鼠懸停在影像的背景上時，會觸發 3D 效果，但是當我移動到女孩影像區域時，它不再觸發。透明影像覆寫背景。當滑鼠懸停在女孩影像上時，如何使其觸發？
看看我在JSFIDDLE上做了什么
HTML -
<div class="test-imgplace">
<img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
<div class="card-hover">
<div class="card">
<div class="card-content">
<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
</div>
</div>
</div>
</div>
CSS -
.card .image{
height: 275px;
width: 183px;
background-size: cover;
background-position: center center;
}
.imgtest {
position: absolute;
z-index: 1;
text-align: center;
top: 0;
left: 100px;
border: solid 1px;
}
.test-imgplace {
margin: 0 auto;
position: relative;
overflow: hidden;
}
.card .text{
height: 20%;
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 50px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.card{
width: 183px;
height: 275px;
margin: auto auto;
background: #383030;
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.card-content{
transform-style: preserve-3d;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hover-in{
transition: .3s ease-out;
}
.hover-out{
transition: .3s ease-in;
}
.card-hover{
margin:0;
}
uj5u.com熱心網友回復：
當滑鼠懸停在半透明影像上時，它會導致滑鼠事件到達那里，而不是應用 3D 效果的腳本。
這很容易修復 - 只需添加pointer-events: none;到.imgtest. 修復的 JSFiddle
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466628.html
下一篇：單擊導航中的鏈接后選單未關閉