如何使用CSS（span，onhover，selectors）隱藏和顯示懸停的元素？

我有一個問題，當我試圖顯示一個<aside>文本內嵌時，鼠標懸停在一個定義的關鍵字。我計劃這樣做的目的是利用<span>，它包裝了<aside>，然後我可以使用像#main > article > .inline-aside, aside { display: none; }這樣的CSS選擇器來選擇這些特殊用途區域內的子元素<aside>。如何使用CSS（span，onhover，selectors）隱藏和顯示懸停的元素？

我似乎可以隱藏內容，但不能讓他們回來。問題可能是，我是一個CSS總菜鳥，display: none以某種方式刪除元素。有沒有一種方法可以單獨使用CSS來實現？

這裏是相關的部分，我有一個更充實的小提琴在https://jsfiddle.net/Veksi/z0d5j1xb/。

<article id="faq-section-general" class="tab-content"> <h1>General</h1> <p>The four Byzantine <span class="inline-aside">generals.<aside>General inline aside.</aside></span></p> <p>Some more general text.</p> </article>

來源

2017-04-14 Veksi

的事情是，you can't use <aside> inside of a <p>。該<aside>然後將它改變你的DOM是什麼使得它不可能在.inline-aside爲you can't go back in the DOM的懸停選擇<aside>的<p>外移動。

但是，如果你改變你的<p>例如到<div>正確的選擇邏輯將如下所示：

/* By default, hide aside blocks that have .inline-aside elements as parents. */ 
#main > article .inline-aside aside { 
    display: none; 
} 

/* Show the aside elements inside .inline-aside elements when they're hovered. */ 
#main > article .inline-aside:hover aside { 
    display: inline; /* or block */ 
}

Updated JSFiddle。

來源

2017-04-14 10:37:06 Marvin

那麼，這回答了所有的疑慮我了。很好謝謝！ – Veksi

嘗試（你的代碼示例）

tab-content > p > span.inline-aside:hover + aside{ 
    display:block/*or anything else*/ 
}

編輯您還可以使用transition使事情更加平滑，就像這樣：

tab-content > p > span.inline-aside:hover + aside{ 
    display:block; 
    transition: all 0.5s ease-in-out; 
}

來源

2017-04-14 10:21:03 Vivick

你有三個問題

跨度內聯元素，但除了是塊元素

你不能把塊元素內聯元素內

的問題是，當你這樣做的瀏覽器渲染塊內聯元素

你可以把外面跨度元素div的

您選擇>意味着直接孩子沒有後代，所以你必須包括p元素在你的選擇#main > article > p > .inline-aside或只使用空間選擇#main .inline-aside

的是，你不能懸停的與display: none;元素，你應該使用visibility: hidden;

這裏是一個solution但你仍然可以做的更好

來源

2017-04-14 10:27:07 robert

如果<aside>元素對您不重要，您可以考慮使用內聯元素作爲彈出文本。

我修改了您的代碼以在.inline-aside元素內使用另一個<span>。看看這裏：https://jsfiddle.net/z0d5j1xb/3/

希望這就是你需要的。

此外，一般性建議 - 避免在像#main > article > .inline-aside這樣的CSS中使用深層嵌套。

來源

2017-04-14 10:34:41 makeiteasy

我們可以使用JavaScript/jQuery的隱蔽或懸停事件而顯示數據檢查出下面的代碼,,在片段當u懸停在將軍的字，它會顯示內容

$(document).ready(function(){ 
 
\t $(".inline-aside").hover(
 
    function() { 
 
    $('aside').css('display','initial')},function(){$('aside').css('display','none')}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<body> 
 
<article id="faq-section-general" class="tab-content"> 
 
     <h1>General</h1> 
 
     <p>The four Byzantine <span class="inline-aside">generals.<aside class="a" style="display:none">General inline aside.</aside></span></p> 
 

 
     <p>Some more general text.</p> 
 
    </article> 
 
</body>

來源

2017-04-14 11:02:43

如何使用CSS（span，onhover，selectors）隱藏和顯示懸停的元素？

回答

相關問題