7

我想对悬停图像做一个 CSS 效果。

当我将鼠标悬停在图像上时，我想显示一个包含文本等内容的 div。

所以我想用这段代码做点什么：

<div id="image"><img src="image.png"/></div>

<div id="hover">Test message</div>

我试图在css显示中隐藏“悬停” div，在悬停时我试图将显示设置为阻止，但它不起作用......:(

编辑：我想要图像上的文字。当我将图像悬停时，它应该有一些不透明度，但文本不应该收到那种不透明度！

有什么方法可以做到这一点吗？

4

6 回答 6

10

http://jsfiddle.net/ZSZQK/

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

保持简单，无需更改标记。

更新

如果你想在鼠标悬停时改变图像的不透明度，那么 http://jsfiddle.net/ZSZQK/4/

#hover {
    display: none;
    position: relative;
    top: -25px;
}

#image:hover {
    opacity: .7;
}

#image:hover + #hover {
    display: block;
}

更新 2

由于您在最初的问题中添加了更多要求，因此现在需要更改原始 html 标记。

我假设您正在使用html5，如果是这样，您应该使用适合您的内容上下文的标签：

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

和CSS

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    right: 0;
    background-color: rgba(0,0,0,.15);
}

figure:hover img {
    opacity: .7;
}

figure:hover figcaption {
    display: block;
}

jsFiddle

于 2013-03-11T13:02:40.857 回答
3

尝试：

<div id="image">
    <img src="image.png"/>
    <div class="hover">Test message</div>
</div>

CSS：

#image {
    position:relative;
}

#image .hover {
    display:none;
    position:absolute;
    bottom:0;
}

#image:hover .hover {
    display:block;
}

基本上我所做的是：

  • 将文本 div 移动到 div 内#image。
  • 改为id="hover"_class="hover"
  • 添加display:block何时#image悬停，display:none如果没有。
  • 一些定位规则，这只是一个快速的例子，让我知道它是否有效。
于 2013-03-11T13:00:51.807 回答
1

有很多方法可以做到这一点，但如果您想要仅使用 CSS 的方法，则需要将您的 html 重组为：

<div id="image">
    <img src="image.png"/>
    <div id="hover">Test message</div>
</div>

然后在您的 CSS 中默认隐藏消息：

#hover {display:none;}

然后显示消息：

#image:hover #hover {display:block;}
于 2013-03-11T13:02:59.317 回答
0

你好如果我理解正确你想要这样的东西：

<div id="wrapper">
    <div id="img-wrapper">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
    </div>
    <div id="text-wrapper">
        <p>Hello world!</p>
    </div>        
</div>

CSS：

#wrapper{
    position:relative;
    border:1px solid black;
    width:102px;
    height:102px;
}

#text-wrapper{
    position:absolute;
    height:0px;
    overflow:hidden;
    font-size:14px;
    font-family:Arial,Tahoma;
    font-weight:bold;

    transition: height 1s;
    -moz-transition: height 1s; /* Firefox 4 */
    -webkit-transition: height 1s; /* Safari and Chrome */
    -o-transition: height 1s; /* Opera */

}

#img-wrapper:hover + #text-wrapper{
    height:32px;
    width:102px;
}

实现这一点的关键是这个 css 行：

#img-wrapper:hover + #text-wrapper{

它实际上做的是“当我将 img-wrapper div 悬停在 text-wrapper div 中时”

在此处查看演示：http: //jsfiddle.net/A9pNg/1/

于 2013-03-11T13:19:59.253 回答
0

如果没有 JavaScript，你可以这样做：

1.将#hover div图像放在图像顶部并设置opacity:0；

2.将其添加到 css 中：

    #hover:hover {
     opacity:1
     }

这应该可以解决您的问题。

于 2013-03-11T13:02:41.710 回答
0

这是我在谷歌上找到的解决方案

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Untitled Document</title>
                </head>
                <style type="text/css">
                #mybox {
                width:80px;
                height:90px;
                float:left;
                background-color:#0F9;
                padding:10px;
                }
                .Imgdiv {
                width:80px;
                height:20px;
                margin:0px 0px 10px 0px; padding:0px;
                cursor:pointer;
                background-color:#39C;
                }
                #mybox .hiddenDiv {
                left:0px;
                display:none;
                z-index:100;
                width:80px;
                height:50px;
                margin:0px;
                background-color:#336;
                float:left;
                }
                #mybox:hover .hiddenDiv {
                display:block; top:0px; left:8px;
                }
                </style>
                <body>
                <div id="mybox">
                <div class="Imgdiv"></div>
                <div class="hiddenDiv"></div>
                </div>


                </body>
                </html>
于 2013-03-11T13:11:34.473 回答