jQuery 如何为伪元素制作悬停效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8874326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a hover effect for pseudo elements?
提问by Nils_e
I have a this setup:
我有一个这样的设置：
<div id="button">Button</div>
and this for CSS:
这对于 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;
}
Is there a way to give the pseudo element a hover effect such as #button:before:hover {...}and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...}? CSS only would be nice, but also jQuery is fine too.
有没有办法给伪元素一个悬停效果，例如#button:before:hover {...}，是否也可以让伪元素悬停以响应另一个悬停的元素，如下所示：#button:hover #button:before {...}？CSS只会很好，但jQuery也很好。
回答by James Montagne
You can change the pseudo-element based on hover of the parent:
您可以根据父元素的悬停更改伪元素：
#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>回答by Brilliand
#button:hover:beforewill change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.
#button:hover:before将响应悬停按钮更改伪元素。但是，如果您只想对伪元素做任何重要的事情，最好将实际元素放入 HTML 中。伪元素相当有限。
While CSS won't let you style elements based on elements that come after them, it is usually possible to rig something with the same basic effect by putting :hover on a parent node, i.e.:
虽然 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
}
回答by Unai Yécora
To clarify, you CAN NOTgive :hoverto a pseudo element. There's no such thing as ::after:hoverin CSS as of 2018.
澄清一下，你不能给:hover一个伪元素。::after:hover截至 2018 年，CSS 中没有这样的东西。
回答by komrad
If its just for design purposes I think its better to create Pseudo-Elements on either side of the Rectangle Box and to keep the HTML as simple as possible:
如果只是出于设计目的，我认为最好在矩形框的两侧创建伪元素并保持 HTML 尽可能简单：
HTML:
HTML：
<body>
<div class="tabStyle">Rectangle</div>
</body>
CSS:
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:"";
}
I've modified the CSS and the result can be seen below:
我修改了 CSS，结果如下所示：
