悬停时如何在图像上显示文字?

2022-01-22 00:00:00 hover html css

我试图在将鼠标悬停在图像上时显示描述.我已经以一种不太理想的方式完成了它，在此处使用图像精灵和悬停:我希望它看起来与我拥有的完全一样，但使用的是真实文本而不是图像.

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image.

我尝试了一些不同的方法，但似乎不知道该怎么做.我正在尝试仅使用 HTML 和 CSS 来实现，但我不确定这是否可能.

I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.

随意翻看我的代码，我会在此处粘贴我认为相关的内容.

Feel free to poke around in my code, I'll paste what I think is relavent here.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

<div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>

  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>

推荐答案

很简单.包裹图像和悬停时出现"具有相同图像尺寸的 div 中的描述.然后，使用一些 CSS，命令在悬停该 div 时显示描述.

It's simple. Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

一个不错的小提琴:https://jsfiddle.net/govdqd8y/

如果您不想在包装 <div> 上显式设置 <img> 的高度，还有另一个选项，那就是简单地设置<div> 的显示到 inline-block.(但请记住，如果图像无法加载，它看起来会很糟糕.)

There's another option if you don't want to explicitly set the height of the <img> on the wrapping <div>, and that is simply setting the <div>'s display to inline-block. (Keep in mind, though, that it won't look good if the image fails to load.)

如果您选择此选项，您会注意到 <img> 和包装 <div>.这是因为 <img> 的默认 vertical-align 值为 baseline.如果您将其设置为 bottom，它将消失.

If you choose this option, you'll notice that there'll be a slight spacing between the <img> and the bottom of the wrapping <div>. That's because of the <img>'s default vertical-align value of baseline. If you set it to bottom it will disappear.

这是一个使用此选项的小提琴:https://jsfiddle.net/joplomacedo/5cL31o0g/

Here's a fiddle using this option: https://jsfiddle.net/joplomacedo/5cL31o0g/

相关文章