顯示隱藏跨度與顯示：塊不工作懸停

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

顯示隱藏跨度與顯示：塊不工作懸停

回答

相關問題