Question

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

当用户将鼠标悬停在div元素上的文本上时，它将更改文本的位置：

JSFiddle URL：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时，所有样式均适用于该块内的所有内容，包括标题。要解决此问题，您需要将:hover赋予box。

您可以更改它，

innder-div:hover

是这个，

box:hover

以您的样式。

看小提琴-https://jsfiddle.net/anjanasilva/jkwL3n0g/

希望这会有所帮助。干杯。

Answer 2

您必须将inner-div:hover更改为box:hover 这是一个有效的小提琴：https://jsfiddle.net/9jkze0o4/3/

Answer 3

此问题是由于border-width:28px至类.inner-div:hover删除了.inner-div:hover并给边框.inner-div:hover .box加上了边框，如下所示：

 .inner-div:hover .box {
      border: 28px solid rgb(67, 67, 67);
    }

* {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.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;
  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:hover .box {
  border: 28px solid rgb(67, 67, 67);
}
.box {
  height: 100%;
  display: block;
}

.box-label {
  display: list-item;
  margin: 0px auto;
  line-height: 100%;
  vertical-align: middle;
  height: 100%;
  overflow: hidden;
}
.box-label img {
  position: relative;
  top: 50%;
  transform: translate(100%, -50%);
  vertical-align: middle;
  border-radius: 0px;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}

.overlay {
  background: rgba(52,152,219,0.49);
  color: #FFFFFF;
  text-align: center;
  font-size: 40px;
  border-radius: 13px;
  margin-top: 0px;
  cursor: pointer;
  display: none;
  vertical-align: middle;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: display 0.5s;
}

.overlay-icon {
  color: #FFFFFF;
  font-size: 40px;
  line-height: 100%;
}

.overlay-icon i {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: middle;
  opacity: 0;
  top: 100%;
  left: 50%;
  transition: all ease-in-out 0.4s;
  -webkit-transition: all ease-in-out 0.4s;
  transform: translateX(-50%);
}

.caption-box {
  font-size: 16px;
  text-align: center;
  color: #000000;
  font-weight: bold;
  margin-top: 0px;
  word-break: break-word;
  word-break: break-all;
  line-height: normal;
  vertical-align: middle;
  display: inline-block;
  z-index: 2;
  text-align: center;
  margin: 10px auto 20px auto;
  height: auto;
  width: 150px;
}

.caption-label {
  vertical-align: top;
  margin: 0px auto;
  padding-right: 3px;
  display: list-item;
  line-height: 100%;
  overflow: hidden;
  word-break: break-word;
  font-weight: inherit;
  border: none !important;
  min-width: 100px;
  max-width: 150px;
}

<div class="inner-div">
  <div class="box">
    <label class="box-label">
      <img src="https://img00.deviantart.net/f33c/i/2011/139/f/c/vertical_panorama_by_verticaldubai-d3gp1ja.jpg" alt="Image" />
      <div class="overlay">
        <div class="overlay-icon">
     <i class="fa fa-hand-o-up"></i>
        </div>
      </div>
    </label>
  </div>
  <div class="caption-box">
    <label class="caption-label">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </label>
  </div>
</div>

悬停时文本未对齐

3 个答案: