Question

我使用span隐藏了image display:none。尝试在悬停时使用display:block显示它不起作用。任何人都可以帮助我吗？

＆＃13;

.imagegood {
  position: absolute;
  top: 200px;
  background-color: white;
  color: black;
  padding: 10px;
  font-size: large;
  display: none;
}
.ShowHidden:hover {
  display: block !important;
}

＆＃13;

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

＆＃13;

Answer 1

习惯了这个

.ShowHidden:hover .imagegood{
    display:inline-block ;
}

<强> Demo

代码

.imagegood{
    position: absolute;
    top: 200px;
    background-color:white;
    color:black;
    padding:10px;
    font-size:large;
    display:none;
}
.ShowHidden:hover  .imagegood{
    display:inline-block ;
}

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

考虑以下

.ShowHidden:hover .imagegood{
    display:block;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为你应该尝试的是visibility: hidden; vs display: none;

display: none;将其从页面中删除 - 您仍然可以在开发工具中与其进行互动，但无法在visibility: hidden已分配dom空间的位置看到它。

请参阅此回答here

Answer 4

已经给出了答案，但为了您的理解：

如果你想要隐藏和显示任何元素，那么就像你隐藏跨度那样定位那个元素，这样就像这个.ShowHidden:hover span

如果您隐藏div，则使用div而不是span，或者也可以使用class / id name。

Working Demo

Answer 5

为什么不使用JQuery

$(".imagegood")..mouseover(function() {
 $( ".center-block").fadeIn();
});

你甚至可以弹出3秒

 $( ".center-block").fadeIn().delay(3000).fadeOut();

查看此链接http://api.jquery.com/fadein/

显示隐藏的跨度与显示：阻止不在悬停

5 个答案: