在懸停上顯示隱藏文字（CSS）

我已經嘗試了一段時間來顯示:hover上的一些文字，是否有人能夠爲我解釋它？在懸停上顯示隱藏文字（CSS）

我想：

#DivForHoverItem:hover #HiddenText { 
    display: block;}

沒有運氣，可悲。這個小片在我發現的每個例子中。

我也無法理解：https://css-tricks.com/forums/topic/show-text-on-hover-with-css/

我試圖讓<div id="DivForHoverItem"><p>Shown text</p></div>

<div id="HiddenText"><p>Hidden text</p></div>

CSS：

#HiddenText { 
    display: none; 
}

和代碼行那裏^

#DivForHoverItem:hover #HiddenText { 
    display: block;}

來源

2015-07-21 Albert MN.

請發表您的HTML和整個相關CSS。 – Keammoort

發佈您的HTML，CSS本身並不顯示問題出在哪裏。 –

有沒有問題，我似乎無法弄清楚如何做到這一點。我的代碼中沒有什麼是相互作用的，因爲我的代碼只是一個只有小和平的簡單測試。 –

#HiddenText元素必須放在#DivForHoverItem元素中，如果你想用CSS實現這一點。嘗試是這樣的：

#DivForHoverItem { 
 
    /*just so we can see it*/ 
 
    height: 50px; 
 
    width: 300px; 
 
    background-color: red; 
 
} 
 

 
#HiddenText { 
 
    display: none; 
 
} 
 

 
#DivForHoverItem:hover #HiddenText { 
 
    display:block; 
 
}

<div id="DivForHoverItem"> 
 
    <div id="HiddenText"><p>Hidden text</p></div> 
 
</div>

jsfiddle link for convenience

來源

2015-07-21 20:48:59

謝謝，作品 - 很好的演示，現在真的瞭解它:) –

他所要做的就是將'#DivForHoverItem：hover＃HiddenText'更改爲'#DivForHoverItem：hover +＃HiddenText'請參閱https：//developer.mozilla。 org/en-US/docs/Web/CSS/Adjacent_sibling_selectors –

目前尚不清楚他的整個DOM是如何佈置的;我不知道他們肯定是順序元素。好點，但這絕對是一個很好的方法來實現這一點。 –

如果你沒事使用JavaScript時，你可以使用：

var outDiv = document.getElementById('DivForHoverItem'); 
var inDiv = document.getElementById('HiddenText'); 

outDiv.onmouseover = function() { 
    inDiv.style.display = 'inline'; 
}; 

outDiv.onmouseout = function() { 
    inDiv.style.display = 'none'; 
};

來源

2015-07-21 21:11:00

在懸停上顯示隱藏文字（CSS）

回答

相關問題