Как сделать эффект наведения для псевдоэлементов? - PullRequest
Новая
       39

Как сделать эффект наведения для псевдоэлементов?

32 голосов
/ 16 января 2012

У меня есть эта настройка: 

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

Ответы [ 4 ]

55 голосов
/ 16 января 2012

Вы можете изменить псевдоэлемент в зависимости от наведения родительского элемента:

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>
9 голосов
/ 16 января 2012

#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
}
1 голос
/ 05 сентября 2018

Чтобы уточнить, вы НЕ МОЖЕТЕ дать :hover псевдоэлементу.Начиная с 2018 года в CSS нет такой вещи, как ::after:hover.

0 голосов
/ 29 декабря 2014

Если это просто для целей проектирования, я думаю, что лучше создавать псевдоэлементы по обе стороны от прямоугольника и максимально упрощать 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/

...