html - 当鼠标悬停在图像上时，如何使此文本增长？

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 兄弟选择器:

.thumb_list img:hover + .thump_text{
font-size:50px;
}

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

要解决这个问题，您(至少)有两个选择:改为将悬停效果设置为容器(那时不需要同级选择器)或将 pointer-events: none 添加到 .thump_text

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