CSS棘手的悬停效果

Question

每当我将鼠标悬停在图片上时，如何显示图片或文字？你能帮助我吗？

一个例子：

Answer 1

这实际上并不复杂......使用与下面类似的HTML结构，只需在悬停时更改跨度的显示属性。

http://jsfiddle.net/kkxfk/2/

<ul>
    <li><a href="#">Link Title<span>Link Desc.</span></a></li>
</ul>

使用绝对定位将跨度定位到所需位置。     ul li a span {         display：none;     }

ul li a:hover span {
    display: block;
    position: absolute;
}

Answer 2

我用我自己的想法并完全满意，你必须制作2张图片，首先是非文本的，然后是第二张你的文字和hower on .....试试吧......

 <style type="text/css">
    .leftPan{width:200px; float:right;; margin-top:2px}

    #c1 {
     margin:6px;
     border: thin solid black;
     width: 200px;
     height: 200px;
     background: url(1.jpg) no-repeat;
     display: inline-block;
    }
    #c1:hover {
     background: url(2_photo.jpg) no-repeat;
    }

    </style>

Answer 3

在a元素上使用背景图片。

然后您可以使用css

控制何时可见

a:hover {
    background-image: url(url/to/img);
}

喜欢这个

HTML

<nav>
    <a href="#Räätälöity-toimitus">Räätälöity-toimitus</a>
    <img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" />
</nav>

CSS

nav {
    position: relative;
    display: inline-block;
}
a {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 7;
}
a:hover {
    background-image: url(http://placehold.it/50x50/E8117F/E8117F/);
    background-repeat: no-repeat;
    background-position: top right;
}

http://jsfiddle.net/UpGKf/