当我将鼠标悬停在图像上时,我正在try 显示描述.我已经用了一种不太理想的方式,在这里使用了图像精灵和悬停:我希望它看起来与我的样子一模一样,但使用的是真正的文本,而不是图像.

我试过几种不同的方法,但似乎想不出该怎么做.我正try 只使用HTML和CSS,但我不确定这是否可行.

您可以随意查看我的代码,我会在这里粘贴我认为相关的内容.

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时显示.

/* 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>的高度,还有另一个 Select ,那就是简单地将<div>的显示设置为内联挡路.(不过,请记住,如果图像无法加载,它看起来不会很好.)

如果 Select 此选项,您会注意到<img>和包装<div>底部之间会有一个微小的间距.这是因为<img>的默认vertical-align值为baseline.如果你把它设为bottom,它就会消失.

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

Css相关问答推荐

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式?

R SHINY:FILL CONTAINER=TRUE时调整DT数据表高度,

具有不同边框宽度和 colored颜色 的边框半径,Safari渲染问题

正确的`最小/最大宽度`+`非(设备类型)`css媒体查询的语法

为什么在RadixUi上应用Tailwincss和自定义css类不起作用?

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

如何更改 JqGrid 中的pager 背景 colored颜色 ?

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

如何在父叠加层之上呈现子子

网格区域即使使用 fr 也不会减小其宽度

在表格中隐藏绝对伪元素

CSS3 变换:旋转;在 IE9 中

为什么无论我做什么都不能改变复选框的 colored颜色 ?

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)?

如何在 javascript 中获取 HTML 元素的样式值?

使用自定义 CSS 在 WebView 中呈现 HTML

:last-child 没有按预期工作?

模拟显示:React Native 中的内联

CSS停止图像下的文本换行

如何复制 iOS 上固定的后台附件