[英]How to show the same element when hovering a li using only CSS?
我试图在将鼠标悬停在<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 来解决此问题?
如果您的需求很简单,您可以使用: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>
您可以在:hover
伪类上使用背景颜色。 您也可以使用:before
和/或:after
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.