CSS 棘手的悬停效果答案

【问题标题】：CSS tricky hover effectCSS 棘手的悬停效果
【发布时间】：2013-04-08 21:56:29
【问题描述】：

当我将鼠标悬停在图像上时，如何显示图像或文本？你们能帮帮我吗？

一个例子：

【问题讨论】：

你试过什么？你有任何代码可以作为基础工作吗？我们不是来为您工作的。
你可以使用javascript来做到这一点。如果您可以在 JSFiddle 之类的网站上发布示例，我们可以为您提供更多帮助。
我喜欢第三个菜单项中单词中的那些变音符号。 Räätälöity美丽..
您可以将 div 用于在按钮区域内具有绝对定位的弹出文本，并在悬停时显示/隐藏它们。

标签： javascript css

【解决方案1】：

这其实一点也不复杂...使用类似下面的 HTML 结构，只需更改悬停时 span 的显示属性。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：