javascript - 文本在悬停时错位

Question

我正在构建一个带标题的图像组件。

当用户鼠标悬停在 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%;
}

悬停在图片上，如何保持文字位置不变？

Answer 1

看起来您的选择器在悬停时不正确。将鼠标悬停在 inner-div 上时，所有样式都适用于该 block 内的所有内容，包括标题。要解决此问题，您需要将 :hover 赋予 box。

你可以改变这个，

innder-div:hover

成为这个，

box:hover

在你的风格中。

查看 fiddle - https://jsfiddle.net/anjanasilva/jkwL3n0g/

希望这对您有所帮助。干杯。