图像在悬停时显示文本

时间:2017-02-25 05:41:47

标签: jquery html css

我有一个图像,我在CSS中设置它。当光标悬停在图像上时,我需要图像显示标题。但是,像:

{
"count": 9,
"results": [
    {
        "id": 8,
        "name": "Example 1"
    },
    {
        "id": 9,
        "name": "Example 2"
    }
    ....
]}

因为图片不是#image:hover { content:'foo'; } 而无法工作,对吗?有没有jQuery解决方案呢?

1 个答案:

答案 0 :(得分:2)

如果你给他们一个共同的父母,你可以用父母包裹图像,隐藏文本,然后在你悬停父母时显示相对于父母位置的文字。



figure {
  display: inline-block;
  position: relative;
}
figcaption {
  opacity: 0;
  transition: opacity .25s, transform .25s;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(0);
  color: #fff;
  font-size: 3em;
  background: rgba(0,0,0,0.8);
  padding: 1rem;
}
figure:hover figcaption {
  opacity: 1;
  transform: translate(-50%,-50%) rotate(720deg);
}

<figure>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <figcaption>Text</figcaption>
</figure>
&#13;
&#13;
&#13;