[英]div with :href and a link over it all
Here is the code - div and imgage in it - on hover apears another div with text. 这是代码-其中的div和imgage-悬停时会提示另一个带有文本的div。 So the question is - how to make a link over this div (imgWrap) or (imgDescription) with text?
因此,问题是-如何在该div(imgWrap)或(imgDescription)上使用文本建立链接? I want the whole div to be a link, but all my efforts ended with nothing.
我希望整个div成为一个链接,但是我的所有努力都以失败告终。 Thanks
谢谢
link http://jsfiddle.net/6Dupu/ 链接http://jsfiddle.net/6Dupu/
<style>
.wr{
border:1px solid #ccc;
margin:10px;
float:left;
}
.imgWrap {
position: relative;
height: 175px;
width: 250px;
}
.imgWrap img{
height: 175px;
width: 250px;
}
.imgDescription {
position: absolute;
padding:20px;
overflow:hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
height:100%;
line-height:14px;
background: rgba(29, 106, 154, 0.8);
color: #fff;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
</style>
<div class="wr">
<div class="imgWrap">
<img src="somepic">
<p class="imgDescription">
<a href="" style="color:white;"><b>item_name</b></a>
<small style="display:block;padding:10px 0px;">item_text</small>
<small>item_date</small>
</p>
</div>
</div>
Instead of showing a div with text when you hover the first div, use an anchor and use it as block. 悬停第一个div时,不要显示带有文本的div,而应使用锚点并将其用作块。 (display: block)
(显示:块)
<a href=""><div class="wr">
<div class="imgWrap">
<img src="somepic"/>
<p class="imgDescription">
style="color:white;"><b>item_name</b>
<small style="display:block;padding:10px 0px;">item_text</small>
<small>item_date</small>
</p>
</div>
</div>
</a>
And in your style set .imgDescription{marging:0px}- because in Firefox I see that "p" have some marge 在您的样式集中设置.imgDescription {marging:0px}-,因为在Firefox中我看到“ p”有一些破坏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.