Псевдокласс :hover для нескольких элементов

@СергейСереб · Регистрация: 19.09.2016

Студворк — интернет-сервис помощи студентам

Есть такой элемент странички:

Псевдокласс :hover для нескольких элементов

При наведении на текст и текст и стрелочка должны менять цвет. Оба элемента - одна и та же ссылка. При наведении на стрелочку - аналогично - и текст и стрелочка меняют цвет на такой же самый, как и в первом случае.
Можно это реализовать на чистом CSS и HTML?

@Kenworth · 07.11.2016, 22:15

Сообщение от СергейСереб

Можно это реализовать на чистом CSS и HTML?

Можно. Предоставьте Ваш код HTML и CSS

@СергейСереб · 07.11.2016, 22:26 **[ТС]**

HTML5
1
2
3
<a class="adv_text3" href="#">100% Perfect Results or Money Back
   <div class="circle_arrow">
   </div></a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.adv_text3 {
    display: inline-block;
    color: #868686;
    font-size: 34px;
    padding-left: 692px;
    padding-top: 10px;
    padding-right: 100px;
    line-height: 37px;
    letter-spacing: -1px;
    text-decoration: none;
}
.adv_text3:hover {
    
    color: #f6c636;
    
}
.circle_arrow {
    display: inline-block;  
    width: 20px;
    height: 20px;
    background-image: url(circlearrows.jpg);
    background-position: 0px 0px;
}
.circle_arrow:hover {   
    background-image: url(circlearrows.jpg);
    background-position: 20px 0px;
    cursor: pointer;
 
}

Оно поотдельности работает, а вот чтобы вместе...
И насчет оборачиваемости блока в тег "а" у меня некоторые сомнения... Я думал все под один тег "а" сделать, но запутался с псевдоклассом. Не представляю как можно описать изменение двух элементов сразу

@Fedor92 · 07.11.2016, 22:29

СергейСереб, может как-то так?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.adv_text3 {
    display: inline-block;
    color: #868686;
    font-size: 34px;
    padding-left: 692px;
    padding-top: 10px;
    padding-right: 100px;
    line-height: 37px;
    letter-spacing: -1px;
    text-decoration: none;
}
.adv_text3:hover {
    
    color: #f6c636;
    
}
.circle_arrow {
    display: inline-block;  
    width: 20px;
    height: 20px;
    background-image: url(circlearrows.jpg);
    background-position: 0px 0px;
}
.adv_text3:hover > .circle_arrow {   
    background-image: url(circlearrows.jpg);
    background-position: 20px 0px;
    cursor: pointer;

Но лучше код переписать...

@СергейСереб · 07.11.2016, 22:38 **[ТС]**

Сообщение от Fedor92

Но лучше код переписать...

натолкните пожалуйста на правильную мысль
и где почитать про этот ">" для СSS? Как оно правильно называется?

@Fedor92 · 07.11.2016, 22:42

Сообщение от СергейСереб

натолкните пожалуйста на правильную мысль

Можно так: cyberforum.zip , а можно ещё круче оптимизировать...

Сообщение от СергейСереб

и где почитать про этот ">" для СSS? Как оно правильно называется?

Стрелочка указывает на вложенность элементов...

@СергейСереб · 07.11.2016, 22:49 **[ТС]**

Сообщение от Fedor92

Стрелочка указывает на вложенность элементов...

А через пробел разве не указывается вложенность? Как для обычного описания стилей классов и тегов?

@Fedor92 · 07.11.2016, 22:50

Сообщение от СергейСереб

А через пробел разве не указывается вложенность? Как для обычного описания стилей классов и тегов?

Можно и пробелом... Это одно и тоже... Я ставлю стрелочки чтобы видеть вложенность при чтении стилей...

@СергейСереб · 07.11.2016, 23:06 **[ТС]**

Ваш код отличается отсутствием спрайта. Лучше упрощать код или облегчать вес страничек за счет картинок?

@Fedor92 · 07.11.2016, 23:10

Сообщение от СергейСереб

Ваш код отличается отсутствием спрайта. Лучше упрощать код или облегчать вес страничек за счет картинок?

А как этот вопрос к теме относится? Можете юзать спрайт, я сделал всего лишь пример... Вы можете обернуть текст ссылки в span к примеру и эту же стрелочку добавить псевдоэлементом after, тогда фон не нужно будет позиционировать...

@СергейСереб · 07.11.2016, 23:11 **[ТС]**

И можно ли сделать активными только текст и стрелочку? Не весь блок целиком...

KOPOJI · 07.11.2016, 23:11

Сообщение от Fedor92

Можно и пробелом... Это одно и тоже...

разве? Мне казалось, что это разные вещи..

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="root">
  <div class="child-one">
    <div class="child-two">text</div>
    <div class="child-two">text</div>
    <div class="child-two">text</div>
  </div>
  <div class="child-one">
    <div class="child-two">text</div>
    <div class="child-two">text</div>
    <div class="child-two">text</div>
  </div>
</div>

Первый случай, использование "стрелки"

CSS
1
2
3
4
5
6
7
div {
  margin: 5px;
  border: 2px solid black;
}
.root > div {
  border : 2px solid green;
}

https://jsfiddle.net/5vfkqwu2/
в этом случае последнее правило применится только к элементам, являющимися прямыми наследниками указанного перед стрелками. В данном случае это элементы с классом .child-one, и правило будет применяться только к ним, все вложенные в них элементы останутся без изменений - правило их не учитывает.
В случае же использования пробела вместо "стрелки", правило будет применено ко всем вложенным элементам (независимо от уровня вложенности):

CSS
1
2
3
4
5
6
7
div {
  margin: 5px;
  border: 2px solid black;
}
.root div {
  border : 2px solid green;
}

https://jsfiddle.net/5vfkqwu2/1/

Вот и вся разница - стрелка ограничивает вложенность тегов, пробел нет.

@СергейСереб · 07.11.2016, 23:14 **[ТС]**

Сообщение от Fedor92

А как этот вопрос к теме относится? Можете юзать спрайт, я сделал всего лишь пример...

Так я изначально со спрайтом планировал. А в этом случае блок в блоке получается. У меня и возник ступор

@Fedor92 · 07.11.2016, 23:14

KOPOJI, да так и есть, если писать стили с помощью селектора элементов, но в данном случае речь не о потомках, а об элементе в коде, как таковом, причём стили задются с помощью класса...

Сообщение от СергейСереб

А в этом случае блок в блоке получается. У меня и возник ступор

Что значит блок в блоке? Не надо совать в ссылку блок - это семантически не верно

@СергейСереб · 07.11.2016, 23:21 **[ТС]**

Сообщение от Fedor92

Что значит блок в блоке? Не надо совать в ссылку блок - это семантически не верно

Я просто не знаю как по другому сделать - указать смещение для спрайта...
А так - указал блок - окошечко, спозиционировал и показываю только половинку спрайта в нем

@Fedor92 · 07.11.2016, 23:25

СергейСереб, Вы не совсем верно понимаете работу спрайта... Блок у Вас один меняется только фон в нём, а позицию фона в спрайте задаётся индивидуально с помощью свойства background-position...

KOPOJI · 07.11.2016, 23:28

а обернуть все в еще один блок не вариант?

HTML5
1
2
3
4
<div>
  <div>...</div>
  <a ...>...</a>
</div>

и для первого блока прописать фоном спрайт, также для него спозиционировав, как вам надо. И писать :hover для блока-обертки - тогда вы спокойно сможете прописать стили для всех вложенных элементов как вместе, так и по отдельности

Или я что-то неправильно понял?

@Kenworth · 08.11.2016, 00:14

Вообщем то вот такой вариант:

HTML5
1
2
3
4
<a href="" >
  <span class="adv_text3">100% Perfect Results or Money Back</span>
  <span class="circle_arrow"></span>
</a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
 
a{
   text-decoration: none;
   display: inline-block;
}
 
.adv_text3 {
  margin-top: 10px;
  color: #868686;
  font: 400 34px/37px 'Arial', sans-serif;
  letter-spacing: -1px;
  text-decoration: none;
   display: inline;
}
 
.circle_arrow {
  position: relative;
  display: inline-block;
}
 
.circle_arrow:before{
  position: absolute;
  content: '\f18e';
  font: 400 20px/1 'FontAwesome';
  color: #868686;
  bottom: 0;
  left: 10px;
}
 
a:hover .adv_text3, a:hover .circle_arrow:before{
  color: #f6c636;
}

результат

Добавлено через 10 минут
Вот второй вариант:

HTML5
1
2
3
<a class="adv_text3" href="#">100% Perfect Results or Money Back
  <span class="circle_arrow"></span>
</a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
 
.adv_text3 {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  color: #868686;
  font: 400 34px/37px 'Arial', sans-serif;
  letter-spacing: -1px;
  text-decoration: none;
  /* padding-left: 692px; */
  /* padding-right: 100px; */
}
 
.circle_arrow {
  position: relative;
  display: inline-block;
}
 
.circle_arrow:before{
  position: absolute;
  content:'\f18e';
  font: 400 20px/1 'FontAwesome';
  color: #868686;
  bottom: 0;
}
 
.adv_text3:hover, .adv_text3:hover .circle_arrow:before{
  color: #f6c636;
}

результат

@mrtoxas · 08.11.2016, 00:38

СергейСереб, вы хотели спрайты?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .adv_text3 {
        color: blue;
        text-decoration: none;
    }   
    .adv_text3:after {
        content: '';
        display: inline-block;
        background: url(sprite.png) no-repeat -27px -3px;
        width: 18px;
        height: 16px;
        margin-left: 5px;
        vertical-align: middle;
    }
    .adv_text3:hover {
        color: red;
    }   
    .adv_text3:hover:after {
        background-position: -3px -3px;
    }
    </style>
</head>
<body>
    <a class="adv_text3" href="#">100% Perfect Results or Money Back</a>
</body>
</html>

@СергейСереб · 08.11.2016, 00:40 **[ТС]**

Сообщение от KOPOJI

и для первого блока прописать фоном спрайт

он же не будет ссылочным.

Kenworth, пока разбираюсь... я пока как минимум с псевдоклассами before, after не знаком
И попутно вопрос: разве span предназначен для таких вещей? Я думал, что его назначение - выделить слово в предложении, букву в слове....

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076

	Псевдокласс :hover для нескольких элементов 07.11.2016, 22:08. Показов 12799. Ответов 19 Метки нет (Все метки) Есть такой элемент странички: При наведении на текст и текст и стрелочка должны менять цвет. Оба элемента - одна и та же ссылка. При наведении на стрелочку - аналогично - и текст и стрелочка меняют цвет на такой же самый, как и в первом случае. Можно это реализовать на чистом CSS и HTML? 0

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076
	07.11.2016, 23:06 [ТС]
	Ваш код отличается отсутствием спрайта. Лучше упрощать код или облегчать вес страничек за счет картинок? 0

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076
	07.11.2016, 23:11 [ТС]
	И можно ли сделать активными только текст и стрелочку? Не весь блок целиком... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	07.11.2016, 23:25
	СергейСереб, Вы не совсем верно понимаете работу спрайта... Блок у Вас один меняется только фон в нём, а позицию фона в спрайте задаётся индивидуально с помощью свойства background-position... 0

Псевдокласс :hover для нескольких элементов

Решение