我在span
上有一个image
,使用display:none
隐藏了它。尝试在悬停时使用display:block
显示它不起作用。谁能帮我?
.imagegood {
position: absolute;
top: 200px;
background-color: white;
color: black;
padding: 10px;
font-size: large;
display: none;
}
.ShowHidden:hover {
display: block !important;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
最佳答案
考虑以下
.ShowHidden:hover .imagegood{
display:block;
}
.imagegood{
position: absolute;
top: 100px;
background-color:white;
color:black;
padding:10px;
font-size:large;
transition: 1s all;
opacity: 0;
}
.ShowHidden:hover .imagegood{
opacity: 1;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>