How to make a hover effect for pseudo elements?

问题

I have a this setup:

<div id="button">Button</div>

and this for 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.

回答1:

You can change the pseudo-element based on hover of the parent:

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>

回答2:

#button:hover:before will 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.

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.:

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

回答3:

To clarify, you CAN NOT give :hover to a pseudo element. There's no such thing as ::after:hover in CSS as of 2018.

回答4:

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:

 <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:"";
    }

I've modified the CSS and the result can be seen below:

http://jsfiddle.net/a3ehz5vu/

来源：https://stackoverflow.com/questions/8874326/how-to-make-a-hover-effect-for-pseudo-elements

标签

jquery

css

css3

pseudo-element

pseudo-class