Question

我正在投资组合网站上，希望数据悬浮信息显示在左下角（我知道我还没有为此编写代码，这是因为我还没有当鼠标悬停在图像（拇指和原始图像）上时完全显示！）。我已经尝试过数据标题并让信息显示出来，但是我认为我无法将其样式化。感谢您的时间！最好， JTE

.container2 {
  overflow: visible;
  position: relative;
}

.container2 li {
  position: absolute;
  z-index: 1;
}

.container2 li a {
  display: block;
  padding: 0;
  border: 0;
}

.container2 li img {
  margin: 0;
  padding: 0;
  outline: 0;
}

.container2 .hover {
  display: block;
  padding: 0;
  border: 0;
}

a:hover,
a:focus {
  outline: none;
}

a:link,
a:visited,
a:hover {
  color: #000;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid #000;
  padding: 0;
}

<ul class="container-2">

  <li class="work-item" id="001">
    <a href="work/IMG_0138.jpg" data-hover="Information about piece #1">
      <img class="thumb" src="work/IMG_0138 thumb.jpg" width="400" height="260" />
    </a>
  </li>

  <li class="work-item" id="002" data-hover="Information about piece #2">
    <a href="work/NewGoogle_photo.jpg">
      <img class="thumb" src="work/NewGoogle_photo thumb.jpg" width="300" height="362" />
    </a>
  </li>

  <li class="work-item" id="003" data-hover="Information about piece #3">
    <a href="work/_56A5502-1.jpg">
      <img class="thumb" src="work/_56A5502-1 thumb.jpg" width="300" height="160" />
    </a>
  </li>

</ul>

Answer 1

当链接悬停时，显示一个绝对定位的伪元素（::before），并从content获得它的attr(data-hover)：

.container2 {
  overflow: visible;
  position: relative;
}

.container2 li {
  position: absolute;
  z-index: 1;
}

.container2 li a {
  display: block;
  padding: 0;
  border: 0;
}

.container2 li img {
  margin: 0;
  padding: 0;
  outline: 0;
}

.container2 .hover {
  display: block;
  padding: 0;
  border: 0;
}

a {
  position: relative;
}

a:hover,
a:focus {
  outline: none;
}

a:link,
a:visited,
a:hover {
  color: #000;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid #000;
  padding: 0;
}

a:hover::before {
  position: absolute;
  bottom: 0;
  right: 0;
  color: silver;
  content: attr(data-hover);
}

<li class="work-item" id="001">
  <a href="work/IMG_0138.jpg" data-hover="Information about piece #1">
    <img class="thumb" src="https://picsum.photos/400/260" width="400" height="260" />
  </a>
</li>

<li class="work-item" id="002">
  <a href="work/NewGoogle_photo.jpg" data-hover="Information about piece #2">
    <img class="thumb" src="https://picsum.photos/300/326" width="300" height="362" />
  </a>
</li>

<li class="work-item" id="003">
  <a href="work/_56A5502-1.jpg" data-hover="Information about piece #3">
    <img class="thumb" src="https://picsum.photos/300/160" width="300" height="160" />
  </a>
</li>

将鼠标悬停在图像上时，数据悬停未显示

1 个答案: