[英]div with :href and a link over it all
這是代碼-其中的div和imgage-懸停時會提示另一個帶有文本的div。 因此,問題是-如何在該div(imgWrap)或(imgDescription)上使用文本建立鏈接? 我希望整個div成為一個鏈接,但是我的所有努力都以失敗告終。 謝謝
<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>
懸停第一個div時,不要顯示帶有文本的div,而應使用錨點並將其用作塊。 (顯示:塊)
請檢查小提琴
您必須在div
點擊上添加鏈接
<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>
在您的樣式集中設置.imgDescription {marging:0px}-,因為在Firefox中我看到“ p”有一些破壞
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.