如何为伪元素制作悬停效果？
Posted
技术标签:
【中文标题】如何为伪元素制作悬停效果？【英文标题】：How to make a hover effect for pseudo elements? 【发布时间】：2012-02-11 01:24:30 【问题描述】：我有这样的设置：
<div id="button">Button</div>
这适用于 CSS：
#button
color: #fff;
display: block;
height: 25px;
margin: 0 10px;
padding: 10px;
text-indent: 20px;
width: 12%;
#button:before
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
有没有办法给伪元素一个悬停效果，例如#button:before:hover ...，是否也可以让伪元素悬停以响应另一个悬停的元素，像这样：#button:hover #button:before ...？只有 CSS 会很好，但 jQuery 也很好。
【问题讨论】：
有一种方法可以悬停一个元素并影响另一个元素（纯粹使用 css）：***.com/questions/1462360/… 我的问题与伪元素有关 【参考方案1】：为了澄清，您不能将:hover 提供给伪元素。截至 2018 年，CSS 中没有 ::after:hover 这样的东西。
【讨论】：
【参考方案2】：您可以根据父级的悬停来更改伪元素：
JSFiddle DEMO
#button:before
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
#button:hover:before
background-color: red;
#button display: block;
height: 25px;
margin: 0 10px;
padding: 10px;
text-indent: 20px;
width: 12%;
#button:before background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
#button:hover:before background-color: red;<div id="button">Button</div>【讨论】：
注意 -:before 需要 IE8+。
是的，因为这个问题专门针对:before，所以省略了。
不会将悬停应用于按钮而不是伪元素:before吗？我的意思是，如果您希望伪元素在仅悬停伪元素时更改，而不是在悬停按钮的其余部分时更改？
@jgivoni 这将适用于元素或之前的元素。您不能只对伪元素应用悬停。
这个答案是错误的，因为不可能将 :hover 赋予伪元素，在这里你将 :hover 赋予父元素，这不是问题 tbh【参考方案3】：
如果只是出于设计目的，我认为最好在矩形框的任一侧创建伪元素并保持 html 尽可能简单：
HTML：
<body>
<div class="tabStyle">Rectangle</div>
</body>
CSS：
.tabStyle
border-style:solid;
border-color: #D8D8D8;
background : #D8D8D8;
width:200px;
height:93px;
color: #000;
position: relative;
top: 10px;
left: 49px;
text-align:center;
.tabStyle:hover
background : #000;
border-color: #000;
.tabStyle:hover::before
border-color: transparent #000 #000 transparent;
border-style: solid;
border-width: 0px 0px 100px 50px;
.tabStyle:hover::after
border-color: transparent transparent #000 #000;
border-style: solid;
border-width: 0px 50px 100px 0px;
.tabStyle::after
border-color: transparent transparent #D8D8D8 #D8D8D8;
border-style: solid;
border-width: 0px 50px 100px 0px;
position: absolute;
top: -4px;
left:101%;
content:"";
.tabStyle::before
border-color: transparent #D8D8D8 #D8D8D8 transparent;
border-style: solid;
border-width: 0px 0px 100px 50px;
position: absolute;
top: -4px;
right: 101%;
content:"";
我已经修改了 CSS，结果如下所示：
http://jsfiddle.net/a3ehz5vu/
【讨论】：
【参考方案4】：#button:hover:before 将更改伪元素以响应悬停的按钮。但是，如果您只想对伪元素做任何重要的事情，最好将实际元素放入 HTML 中。伪元素相当有限。
虽然 CSS 不允许您根据元素之后的元素来设置元素的样式，但通常可以通过将 :hover 放在父节点上来装配具有相同基本效果的东西，即：
<div id="overbutton">
<div id="buttonbefore"></div>
<div id="button"></div>
</div>
#overbutton
margin-top: 25px;
position: relative;
#buttonbefore
position: absolute;
background-color: blue;
width: 25px;
height: 25px;
top: -25px;
#overbutton:hover #buttonbefore
// set styles that should apply to buttonbefore on button hover
#overbutton:hover #buttonbefore:hover
// unset styles that should apply on button hover
// set styles that should apply to buttonbefore on buttonbefore hover
【讨论】：
以上是关于如何为伪元素制作悬停效果？的主要内容，如果未能解决你的问题，请参考以下文章
如何为 :before 和 :after 伪元素启用 -webkit-animation/transition-property？