格式化图像悬停文本答案

【问题标题】：formatting image hover text格式化图像悬停文本
【发布时间】：2014-04-17 21:30:52
【问题描述】：

我知道这是一个简单的格式问题，但我需要在图像上方的悬停框中格式化一些文本。我想将悬停文本分成两段，并且由于某种原因悬停文本没有覆盖整个图像...下面是我的悬停 CSS：

 ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

ul.img-list li {
  display: inline-block;
  height: auto;
  margin: ;
  position: relative;
  width: 100%;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  display: table;
  height: 100%;
  left: 0;
  position: justify;
  top: 0;
  width: 75%;
}

span.text-content span {
  display: ;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  display: table;
  height: auto;
  left: 0;
  position: justify;
  top: ;
  width:100%;
  opacity: 0;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
  background: rgba(0,0,0,0,5);
  color: white;
  display: ;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 2000ms;
  -moz-transition: opacity 2000ms;
  -o-transition: opacity 2000ms;
  transition: opacity 2000ms;
}

【问题讨论】：

请同时包含相关的 HTML。
为什么同一个东西定义了 3 次？

标签： css html text hover

【解决方案1】：

您可以在此处执行类似此代码示例的操作：JSFiddle

HTML：

<span class="tooltip" data-tooltip="I'm small tooltip. Don't kill me!">Hover me!</span>

CSS：

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
    margin-top: -24px;
    opacity: 0; /* Our element is transparent... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...and hidden. */

    transition: all 0.4s ease-in-out; /* To add some smoothness */
}

.tooltip:hover::after {
    opacity: 1; /* Make it visible */
    visibility: visible;
}

【讨论】：