Css hover after: css — How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?

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

Спросил 10 лет, 9 месяцев назад

Изменено 4 года назад

Просмотрено 83k раз

71

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

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

 
Кнопка
 

и это для CSS:

 #button {
    цвет: #fff;
    дисплей: блок;
    высота: 25 пикселей;
    поле: 0 10px;
    отступ: 10 пикселей;
    отступ текста: 20px;
    ширина: 12%;
}
#кнопка:до {
    цвет фона: синий;
    содержание: "";
    дисплей: блок;
    высота: 25 пикселей;
    ширина: 25 пикселей;
}
 

Есть ли способ придать псевдоэлементу эффект наведения, например #button:before:hover {...} , а также возможно ли заставить псевдоэлемент наводиться в ответ на наведение другого элемента вот так : #button:hover #button:before {.

• jquery
• css
• псевдоэлемент
• псевдокласс

1

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

JSFiddle DEMO

 #button:before {
    цвет фона: синий;
    содержание: "";
    дисплей: блок;
    высота: 25 пикселей;
    ширина: 25 пикселей;
}
#кнопка:наведите:до {
    цвет фона: красный;
}
 

 #button { display: block;
    высота: 25 пикселей;
    поле: 0 10px;
    отступ: 10 пикселей;
    отступ текста: 20px;
    ширина: 12%;}

#button:before { цвет фона: синий;
    содержание: "";
    дисплей: блок;
    высота: 25 пикселей;
    ширина: 25 пикселей;}

#button:hover:before {цвет фона: красный;} 

 
Кнопка
 

7

0

#button:hover:before изменит псевдоэлемент в ответ на наведение курсора на кнопку. Однако, если вы хотите сделать что-то нетривиальное только для псевдоэлемента, вам лучше поместить реальный элемент в свой HTML. Псевдоэлементы довольно ограничены.

Хотя CSS не позволяет вам стилизовать элементы на основе элементов, следующих за ними, обычно можно настроить что-то с тем же базовым эффектом, поместив :hover на родительский узел, т. е.:

 

    <дел>
    <дел>

#надкнопка {
    поле сверху: 25px;
    положение: родственник;
}
#кнопкаперед {
    положение: абсолютное;
    цвет фона: синий;
    ширина: 25 пикселей;
    высота: 25 пикселей;
    верх: -25px;
}
#надкнопка:наведение #кнопкаперед {
    // устанавливаем стили, которые должны применяться к buttonbefore при наведении на кнопку
}
#надкнопка:наведение #кнопкаперед:наведение {
    // отключаем стили, которые должны применяться при наведении на кнопку
    // устанавливаем стили, которые должны применяться к buttonbefore on buttonbefore hover
}
 

Если это просто для целей дизайна, я думаю, что лучше создать псевдоэлементы по обе стороны от прямоугольника и сделать HTML максимально простым:

HTML:

 
    
Прямоугольник
    
 

CSS:

 . tabStyle {
        стиль границы: сплошной;
        цвет границы: #D8D8D8;
        фон: #D8D8D8;
        ширина: 200 пикселей;
        высота: 93px;
        цвет: #000;
        положение: родственник;
        верх: 10 пикселей;
        осталось: 49пкс;
        выравнивание текста: по центру;
    }
    .tabStyle:наведите {
        фон: #000;
        цвет границы: #000;
    }
    .tabStyle:hover::before {
        цвет границы: прозрачный #000 #000 прозрачный;
        стиль границы: сплошной;
        ширина границы: 0px 0px 100px 50px;
    }
    .tabStyle: hover:: после {
        цвет границы: прозрачный прозрачный #000 #000;
        стиль границы: сплошной;
        ширина границы: 0px 50px 100px 0px;
    }
    .tabStyle::после {
        цвет границы: прозрачный прозрачный #D8D8D8 #D8D8D8;
        стиль границы: сплошной;
        ширина границы: 0px 50px 100px 0px;
        положение: абсолютное;
        верх: -4px;
        осталось: 101%;
        содержание:"";
    }
    .tabStyle:: перед {
        цвет границы: прозрачный #D8D8D8 #D8D8D8 прозрачный;
        стиль границы: сплошной;
        ширина границы: 0px 0px 100px 50px;
        положение: абсолютное;
        верх: -4px;
        справа: 101%;
        содержание:"";
    }
 

Я изменил CSS, и результат можно увидеть ниже:

http://jsfiddle. net/a3ehz5vu/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS: псевдокласс hover

Псевдокласс :hover выбирает и стилизует зависший элемент. Он покрывается пользователем.

Элементы наводятся, когда пользователь наводит указатель мыши на элемент. Он не активирует указывающее устройство.

Псевдоклассы :link, :active или :visited переопределяют стиль, определенный псевдоклассом :hover.

Многие сенсорные устройства не поддерживают :hover, потому что у него есть проблемы с сопоставлением.

Селекторы уровня 3

Селекторы уровня 4

 :hover {
  css объявления;
} 

Пример псевдокласса :hover:

 

  <голова>
    
    <стиль>
      а: наведите {
        цвет фона: #8ebf42;
        цвет: #666;
      }
    
  
  <тело>
     
: пример селектора при наведении
 
    W3docs.com
 
 
  
 

Попробуй сам »

Наведите указатель мыши на ссылки, чтобы увидеть, как меняется цвет.

Пример псевдокласса :hover с тегом

 

  <голова>
    
    <стиль>
      а {
        цвет: #1c87c9;
      }
      а: наведите {
        цвет фона: #8ebf42;
        цвет: #еее;
      }
    
  
  <тело>
     
: пример селектора при наведении
 
    
Lorem Ipsum — это просто фиктивный текст для полиграфии и набора. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. Он был популярен в 1960-е годы с выпуском листов Letraset, содержащих отрывки из Lorem Ipsum, а совсем недавно — с программным обеспечением для настольных издательских систем, таким как 
 Aldus PageMaker, включая версии Lorem Ipsum.

  
 

Попробуй сам »

Пример псевдокласса :hover с тегом

  <голова> <стиль> дел {
 отступ: 30 пикселей;
 цвет фона: #8ebf42;
 цвет: #еее;
 }
 раздел:наведите {
 цвет фона: #666;
 цвет: #fff;
 }   <тело>
: пример селектора при наведении
 <дел> Lorem ipsum - просто фиктивный текст.