CSS 顯示或隱藏子元素

很多時候我們僅僅只是想讓鼠標移動入某個元素，然后顯示出某個元素。

大多數博客的標題或內容都是：使用CSS實現鼠標懸停在一行上，顯示某些元素

很遺憾，這是錯誤的，鼠標懸停后，盡管CSS標准中有定義此種方式以顯示出某些元素，但是：

這只能顯示出子元素。

例子：

HTML端：

 

<div class="test">
    <span>鼠標移入顯示</span>
</div>


<div class="dome">
    <span>顯示</span>
</div>

 

CSS定義：

.dome{
  display:none;  
}

/* 按照其余博客內容所示代碼 */
.test:hover .dome{
  display:block;
}

 

此刻，所需效果並沒有被完成，DIV.dome 並不能如期顯示（實踐，這里不提供GIF進行效果測試）。

為什么呢？因為此標准僅僅只能對子元素生效。

如何修改？如下，僅需修改HTML即可：

<div class="test">
    <span>鼠標移入顯示</span>
    <div class="dome">
        <span>顯示</span>
    </div>
</div>

當 DIV.dome 成為子元素，效果與所想一致，鼠標移入顯示。

OneNote筆記如下：

有些時候按照以上方法仍不能顯示的話，則是權重的問題。

僅需在后面加上 !important 即可

以上。

 

博客：https://www.cnblogs.com/chongsaid/

轉載權限：需取得博主意見，否則視為侵犯著作權