javascript - 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 { 显示：无；}

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

Answer 2

我用我自己的想法使用它并得到完全满意，你必须制作 2 张图片，第一个是非文字的，第二个是你的文字和如何在它们上面......试试看......

 <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/