如何在图像悬停时使此文本增长？

Question

当.thumb_text li.thumb_list悬停时，我希望<img>成长。目前，我只能将鼠标悬停在文字上时进行缩放，而不是<img>。

此外，由于某种原因，无论我给出什么重量或字体系列，文字都会浮雕。

li.thumb_list img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

li.thumb_list:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

h1.thumb_text {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

h1.thumb_text:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.photo_thumbnails {
  display: inline-block;
  width: 1300px;
  height: 235px;
  overflow: hidden;
  position: relative;
}

.thumbnail_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -moz-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
}

li.thumb_list {
  display: inline-block;
  overflow: hidden;
  height: auto;
  margin: auto;
  text-align: center;
  position: relative;
}

h1.thumb_text {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 0;
  color: #FFF;
  height: 50px;
  width: 200px;
  z-index: 999;
  vertical-align: middle;
  text-align: center;
  font-family: 'anonymous pro', monospace;
  font-size: 20px;
  font-weight: 100;
}

<div class="thumbnail_container">

  <div class="photo_thumbnails">

    <ul>

      <li class="thumb_list">
        <a href="http://scottnorris.co.uk/photos/uk.html"><img src="Photos/Thumbnails/UK.jpg" width="300" height="225">
          <h1 class="thumb_text">uk landscapes</h1>
        </a>
      </li>

      <li class="thumb_list">
        <a href="http://scottnorris.co.uk/photos/asia.html"><img src="Photos/Thumbnails/Asia.jpg" width="300" height="225">
          <h1 class="thumb_text">asian landscapes</h1>
        </a>
      </li>

      <li class="thumb_list">
        <a href="http://scottnorris.co.uk/photos/forgotten.html"><img src="Photos/Thumbnails/Lost.jpg" width="300" height="225">
          <h1 class="thumb_text">lost &amp; forgotten</h1>
        </a>
      </li>

      <li class="thumb_list">
        <a href="http://scottnorris.co.uk/photos/in-nature.html"><img src="Photos/Thumbnails/In_Nature.jpg" width="300" height="225">
          <h1 class="thumb_text">in nature</h1>
        </a>
        <li>

    </ul>

  </div>

</div>

Answer 1

如果您只想在悬停img时增加文本，可以像这样使用CSS同级选择器：

Q { r with … }

请注意，如果您仅使用此CSS悬停文本，则会再次减少，因为您只选择了img的悬停效果。

要解决此问题，您至少有两个选择：将悬停效果设置为容器（然后不需要兄弟选择器）或将.thumb_list img:hover + .thump_text{ font-size:50px; } 添加到pointer-events: none

关于你的字体只是粗体，我想这可能是因为你的自定义字体只有一个字体粗细。通常，您必须为浏览器提供每种字体重量的不同文件。另一方面，当应用任何一个极值（100或粗体/ 700）时，浏览器通常会尝试创建自己的权重。这只是一个猜测，但可能是一个可能的原因。