我有一个图像,我在CSS中设置它。当光标悬停在图像上时,我需要图像显示标题。但是,像:
{
"count": 9,
"results": [
{
"id": 8,
"name": "Example 1"
},
{
"id": 9,
"name": "Example 2"
}
....
]}
因为图片不是#image:hover {
content:'foo';
}
而无法工作,对吗?有没有jQuery解决方案呢?
答案 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;