如何为伪元素制作悬停效果？

我有一个这样的设置:

<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 也是好的。

84755 次浏览
小开
最佳答案

您可以基于父元素的悬停来更改伪元素:

JSFiddle 演示

#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>

小开

#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
}
小开

如果仅仅出于设计目的，我认为最好在矩形框的两边创建伪元素，并尽可能保持 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/

小开

为了说明这一点，不能将 :hover赋给一个伪元素。截至2018年，CSS 中还没有 ::after:hover这样的东西。


提交答案