我正在构建一个带标题的图像组件。
当用户鼠标悬停在 div 元素上的文本上时,它正在改变文本的位置:
JSFiddle 网址:https://jsfiddle.net/9jkze0o4/
CSS:
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
border-style: solid;
border-width: 28px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
悬停在图片上,如何保持文字位置不变?
最佳答案
看起来您的选择器在悬停时不正确。将鼠标悬停在 inner-div
上时,所有样式都适用于该 block 内的所有内容,包括标题。要解决此问题,您需要将 :hover
赋予 box
。
你可以改变这个,
innder-div:hover
成为这个,
box:hover
在你的风格中。
查看 fiddle - https://jsfiddle.net/anjanasilva/jkwL3n0g/
希望这对您有所帮助。 干杯。
关于javascript - 文本在悬停时错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53080959/