发表新帖
发表新帖

How to make a hover effect for pseudo elements?

前端 未结
关注
4 399
一向
一向 2020-11-29 01:01

I have a this setup:

Button

and this for CSS:

#button {
    color: #fff;
    display:
相关标签:
4条回答
  • 挽巷
    2020-11-29 01:29

    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/

    0 讨论(0)
  • 别跟我提以往
    2020-11-29 01:31

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

    0 讨论(0)
  • 悲哀的现实
    2020-11-29 01:47

    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>

    0 讨论(0)
  • 一整个雨季
    2020-11-29 01:56

    #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
}
    0 讨论(0)
 看不清?
提交回复
热议问题