我创建了一个代码段来演示我遇到的问题,基本上,一旦将鼠标悬停在其中一个框上,跨度标签似乎就会改变



div#mobile--categories__wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div#mobile--categories__wrapper a.mobile--category__link {
  margin: 5px;
  text-decoration: none;
  width: calc(50% - 10px);
  position: relative;
  height: 200px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, 0.75);
  border-radius: 5px;
}

div#mobile--categories__wrapper img.mobile--category__img {
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}

div#mobile--categories__wrapper a.mobile--category__link img.mobile--category__img {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  transition: 0.2s all ease-in;
}

div#mobile--categories__wrapper a.mobile--category__link:hover img.mobile--category__img {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transition: 0.2s all ease-in;
}

div#mobile--categories__wrapper span.mobile--category__label {
  width: 100%;
  display: block;
  text-align: center;
  height: 100%;
  line-height: 200px;
  z-index: 10;
  position: relative;
}

div#mobile--categories__wrapper span.mobile--category__label {
  width: 100%;
  display: block;
  text-align: center;
  height: 100%;
  line-height: 200px;
  z-index: 10;
  position: absolute;
}

span.mobile--category__label {
  position: relative;
  height: 75px !important;
  background-color: rgba(0, 0, 0, 0.75);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 75px !important;
}

<div id="mobile--categories__wrapper">
  <a class="mobile--category__link">
    <img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
    <span class="mobile--category__label">label goes here</span>
  </a>
  <a class="mobile--category__link">
    <img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
    <span class="mobile--category__label">label goes here</span>
  </a>
  <!-- <a class="mobile--category__link">
    <img src="" class="mobile--category__img"/>
  </a>
  <a class="mobile--category__link">
    <img src="" class="mobile--category__img"/> -->
  </a>
</div>





我需要在标签之前/下方为图像赋予的悬停模糊效果上,使标签的高度停止移动几个像素。是什么原因造成的,我该如何解决?

最佳答案

悬停效果时更改此过渡。设置为

    transition: initial;




div#mobile--categories__wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div#mobile--categories__wrapper a.mobile--category__link {
  margin: 5px;
  text-decoration: none;
  width: calc(50% - 10px);
  position: relative;
  height: 200px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 15px 2px rgba(0, 0, 0, 0.75);
  border-radius: 5px;
}

div#mobile--categories__wrapper img.mobile--category__img {
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}

div#mobile--categories__wrapper a.mobile--category__link img.mobile--category__img {
  -webkit-filter: blur(1px);
  filter: blur(1px);
  transition: initial;
}

div#mobile--categories__wrapper a.mobile--category__link:hover img.mobile--category__img {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  transition: initial;
}

div#mobile--categories__wrapper span.mobile--category__label {
  width: 100%;
  display: block;
  text-align: center;
  height: 100%;
  line-height: 200px;
  z-index: 10;
  position: relative;
}

div#mobile--categories__wrapper span.mobile--category__label {
  width: 100%;
  display: block;
  text-align: center;
  height: 100%;
  line-height: 200px;
  z-index: 10;
  position: absolute;
}

span.mobile--category__label {
  position: relative;
  height: 75px !important;
  background-color: rgba(0, 0, 0, 0.75);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 75px !important;
}

<div id="mobile--categories__wrapper">
  <a class="mobile--category__link">
    <img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
    <span class="mobile--category__label">label goes here</span>
  </a>
  <a class="mobile--category__link">
    <img src="https://images.unsplash.com/photo-1528827997138-52e429c75136?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6107df40cd644462e6ae1fdd7f1f4845" class="mobile--category__img" />
    <span class="mobile--category__label">label goes here</span>
  </a>
  <!-- <a class="mobile--category__link">
    <img src="" class="mobile--category__img"/>
  </a>
  <a class="mobile--category__link">
    <img src="" class="mobile--category__img"/> -->
  </a>
</div>

关于css - CSS模糊会导致跨度上的一些位置/高度偏移而没有过滤器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50939196/

10-12 12:40
查看更多