html - 使用显示 :block not working on hover 显示隐藏的跨度

Question

我在 image 上有一个 span，我使用 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>

Answer 1

考虑以下

.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>