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

Question

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

77

我有这样的设置：

<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也可以。

- chasethesunnn

1

有一种方法可以使用CSS悬停在一个元素上并影响另一个元素：https://dev59.com/S3M_5IYBdhLWcg3wPAnU，我的问题与伪元素有关。 - chasethesunnn

4个回答

39

需要澄清的是，您无法给伪元素:hover。截至2018年，在CSS中没有::after:hover这样的语法。

- Unai Yécora

11

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

- Brilliand

0

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

- komrad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Montagne · Accepted Answer

您可以基于父元素的悬停状态更改伪元素：

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>