Question

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

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

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

Answer 1

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

图像在悬停时显示文本

1 个答案: