僅使用 CSS 懸停 li 時如何顯示相同的元素？

Question

我試圖在將鼠標懸停在<ul>內的<ul> <li>元素上時創建疊加效果。
我希望這個元素對每個<li>都是通用的。

我的第一個想法是在列表中添加一個額外的元素，例如<div> 。
粗略的例子：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <div></div>
</ul>

ul div {
   opacity: 0
}
li:hover ~ div {
   opacity: 1
}

但是，除了<li>之外，我們不能在<ul>放置任何標簽，因為它會被視為無效標記。

由於無法選擇元素的父元素，有沒有辦法僅使用 CSS 來解決此問題？

Answer 1

如果您的需求很簡單，您可以使用:before和:after偽元素。

如果您嘗試使用子元素來選擇父元素，目前這是不可能的： 是否有 CSS 父選擇器？

最小示例：

 li:hover:after{ display:inline-block; content:"pseudo element"; background-color:#ccc; }

 <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul>

帶有一些屬性定義文本的擴展示例：

 ul li:hover:before, li:hover:after{ display:inline-block; position:absolute; float:right; content:attr(data-myMessage); animation-duration: 250ms; animation-name: slidein; margin-left: 0; background-color:#bada55; } li:hover:after{ animation-name: slideinleft; opacity:0%; margin-left: -1rem; } @keyframes slidein { from { margin-left: 10rem; opacity:0%; } to { margin-left: 0rem; opacity:100%; } } @keyframes slideinleft { from{ margin-left: -10rem; opacity:0%; } to { margin-left: -1rem; opacity:100%; } }

 <ul> <li data-myMessage="message">aaa</li> <li data-myMessage="something">bbb</li> <li data-myMessage="bottle">ccc</li> </ul>

Answer 2

您可以在:hover偽類上使用背景顏色。 您也可以使用:before和/或:after 。