显示隐藏跨度与显示：块不工作悬停

我有一个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>

来源

2015-12-01 shima amini

考虑以下

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

来源

2015-12-01 07:06:21 Manwal

谢谢你，亲爱的，我编程新手。你的代码很好，谢谢。当它出现时我想要一些转换。有可能的？ –

你想要什么类型的效果@shimaamini？ – Manwal

跨度显得有点慢。有可能与CSS？ –

习惯了这种

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

来源

2015-12-01 07:05:06

我想你应该尝试是visibility: hidden; VS display: none;

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

看到这个答案here

来源

2015-12-01 07:07:07 richessler

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

如果你想隐藏和显示的任何元素，则针对该元素太喜欢你躲在跨度等绳拉使用范围也像这样.ShowHidden:hover span

如果你隐藏div然后用div而不是span或者你也可以使用class/id的名字。

Working Demo

来源

2015-12-01 07:08:44

谢谢你，你的权利。我明白:) –

您的欢迎:) –

为什么不使用JQuery

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

你甚至可以把它弹出了3秒

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

这个链接看看http://api.jquery.com/fadein/

来源

2015-12-01 07:53:03 user1865560

显示隐藏跨度与显示：块不工作悬停

回答

相关问题