将Css悬停在图像上 - 加载div

我想在图像上悬停时显示包含文本的div。

所以我想做些什么与此代码：

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

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

我试图隐藏“悬停” DIV在CSS显示和悬停我试图将显示器设置为阻止，但其不工作... :(

编辑：！我想要的图像上的文字。当我将鼠标悬停在图像应该得到一些不透明但文字不应该收到不透明度

有没有什么方法做这个？

来源

2013-03-11 Taboo Loco

我们可以看到您的JavaScript？还设置http://jsfiddle.net/将有助于... – Th0rndike 2013-03-11 13:00:03

的soultion应该没有JavaScript的？ – Tbi45 2013-03-11 13:00:11

是的，它应该没有Js。 – 2013-03-11 13:02:15

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-11 13:02:40

图像不透明度 – 2013-03-11 13:14:55

@Taboo疯子更新的回答感谢您这是工作，但它有点奇怪，因为当我将鼠标悬停在假设的地方，文字应，文本没有出现，它基那flases。 – 2013-03-11 13:21:56

@TabooLoco那当你将鼠标悬停文本（而不是图像），所以我刚搬到后面的文字发生。为了更好地解决问题，您需要将标记更改为TheBronx和James King。请参阅** http：// jsfiddle。net/ZSZQK/5/** – 2013-03-11 13:31:50

尝试：

<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中#image格。
改变id="hover"到class="hover"
新增display:block时#image悬停和display:none如果没有。
一些定位规则，这只是一个快速示例，让我知道它是否有效。

来源

2013-03-11 13:00:51 TheBronx

谢谢，它实际上工作。有什么办法悬停我可以使图像的不透明度达到70％左右，并将文字放在图像上？当有人把鼠标停留在图像像文本将被放置在不透明图像上。 – 2013-03-11 13:08:02

没有JavaScript，你可以这样做：

词根记忆的#hoverdiv是对图像的顶部，并设置opacity:0;

2.Than添加此的CSS：

#hover:hover { 
    opacity:1 
    }

这应该解决您的问题。

来源

2013-03-11 13:02:41 Tbi45

有很多方法可以做到这一点，但如果你想有一个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-11 13:02:59

不需要重新构建标记 – 2013-03-11 13:06:10

是的，但如果我想为图像添加不透明度，文本也会获得不透明度：S – 2013-03-11 16:34:26

这是我在谷歌找到了解决办法

   <!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-11 13:11:34

您好，如果我理解正确的话，你想是这样的：

<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-包装DIV做文字包装格”一些东西

检查演示在这里：http://jsfiddle.net/A9pNg/1/

来源

2013-03-11 13:19:59 Syd

将Css悬停在图像上 - 加载div

回答

相关问题