將鼠標懸停在圖像鏈接上時顯示文本
[英]Showing Text When Hovering Over an Image Link
問題描述
我已經看過這里（ 如何在懸停時在圖像上顯示文本？ ）以找到此問題的解決方案，但是它不能100％起作用...因為該段位於懸停時未覆蓋圖像的圖像部分超過它。 當您將鼠標懸停在圖像上時，我希望整個圖像都被文字覆蓋。 （查看此網址 ： http ： //jsfiddle.net/rMhGE/或更低版本。）
HTML
<body>
<div class="cube1">
<a href="http://google.com"><img src="http://us.123rf.com/400wm/400/400/busja/busja1209/busja120900010/15099001-detailed-vector-image-of-symbol-of-london--best-known-british-double-decker-bus.jpg">
<p class="contact">Random Text Here</p></a>
</div>
</body>
CSS
.cube1 {
position: relative;
width: 400px;
height: 400px;
float: left;
}
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 386px;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
}
.cube1:hover .contact {
visibility: visible;
opacity: 1;
}
任何幫助表示贊賞。 謝謝。
5 個解決方案
解決方案1
3 2013-08-25 03:35:01
更改p元素的p {margin:0px}或指定類
.contact {
overflow: hidden;
position: absolute;
width: 400px;
height: 395px;//change height also to cover it completly
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin:0px
}
解決方案2
3 已采納 2013-08-25 03:39:01
移開觸點的高度。 以及保證金。 如果使用絕對0 0 0 0方法拉伸寬度值，則也不需要寬度值。
.contact {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.95);
color: #aaa;
visibility: hidden;
opacity: 0;
margin: 0;
}
解決方案3
0 2013-08-25 03:34:38
圖像上面有文字，我不確定您要在這里做什么。 “覆蓋圖像”是什么意思？
解決方案4
0 2013-08-25 03:37:35
解決方案5
0 2013-08-25 03:46:14
從.contact移除高度並套用top: -15px; bottom: -15px; top: -15px; bottom: -15px;
或者，最好的方法是設置margin: 0; 去除高度。
當鼠標懸停在文本超鏈接上時，圖像顯示出來，但是需要更改圖像相對於每個鏈接的位置
[英]Image shows when hovering over text hyperlink, but need to change position of image relative to each link
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.