Изменение фона label с помощью hover

@новый вася · Регистрация: 22.01.2015

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

вопрос довольно прост, есть код предположим некоторые три input аля radio кнопка
в label вывожу картинку:

HTML5
1
<img style='width: 50px;' src='img1.png'>

свою для каждого из трех.

HTML5
1
2
3
4
5
6
<input name='Name1' type='radio' id='family1' value='1' class='family'>
<label for='family1' class='family'><img style='width: 50px;' src='img1.png'></label>
<input name='Name1' type='radio' id='family2' value='2' class='family'> 
<label for='family2' class='family'><img style='width: 50px;' src='img2.png'></label>
<input name='Name1' type='radio' id='family3' value='3' class='family'>
<label for='family3' class='family'><img style='width: 50px;' src='img3.png'></label>

вообщем хотел ее в background запилить чтоб можно было поменять ее еси инпут disabled, но не получаеться, чето с синтаксисом намудрил

CSS
1
2
3
4
.family:not(:checked) + label #family3 {    
   background-image: url(img1.png) ;
   background-size: cover;
}

или

CSS
1
 #family3  + label {}

или как его написать чтобы к нему фон нормально подтянулся??

@mrtoxas · 14.08.2016, 00:07

Вопрос прост, описание не очень

У вас есть три radio с label. Во все label вложены разные картинки.
Вы хотите эти картинки сделать через background-image?
Что должно происходить после того, как маркер покидает конкретный radio?
Что должно происходить, когда конкретный radio получает маркер?
А то от family голова идет кругом.

@новый вася · 14.08.2016, 00:40 **[ТС]**

просто прописать например для конкретного input + label по id картинку при такой структуре кода
инпут не чекнутый не дисэйбл не ховер и т.д. просто инпут а там я дальше накалякаю

одним словом перенести img ту что я заключаю между тегов label в style.css под background-image для конкретного елемента

инпутов много но типажа три
когда disabled напишу один фон когда не disabled напишу другой

@mrtoxas · 14.08.2016, 00:47

Когда вы убираете картинку из html, ширина label схлопывается. Для того, чтобы прописать background, надо label задать размеры:

CSS
1
2
3
4
5
#family3 + label{
  width:100px;
  height:200px;
  background: url(img1.png) no-repeat;
}

@новый вася · 14.08.2016, 22:04 **[ТС]**

CSS
1
background-size: cover;

не прокатит разве?

Добавлено через 7 минут
спс большое все работает

CSS
1
2
3
4
#family3 + label{
  background: url(1.png) no-repeat;
  background-size: cover;
}

Добавлено через 12 часов 39 минут

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
input[type="radio"] {
    display:none; 
}
 
label {
    display: inline;
}
 
#family1:hover {
    background-color: rgba(217, 200, 20, 0.5);
} 
#family1:hover+label {
    background-color: rgba(217, 200, 20, 0.5);
} 
 
#family1:checked:hover{
    background-color: rgba(67, 255, 255, 0.5);
} 
#family1:checked:hover+label {
    background-color: rgba(67, 255, 255, 0.5);
} 
 
#family1 + label{
  width: 50px;
  height: 50px;
  background: url(daddy1.png) no-repeat;
  background-size: cover;
}
 
#family1:not(:checked) + label{
    width: 50px;
    display: inline-block;
    border-radius: 25px;
    color: #000;
    background-color: rgba(60,92,90,0.4);
    cursor: pointer;
}
 
#family1:checked + label {
    width: 50px;
    display: inline-block;
    border-radius: 25px;
    color: #000;
    background-color: rgba(67,255,255,0.5);
    cursor: pointer;
}
 
#family1:disabled + label {
    background-color: rgba(0,0,0,0.3);
    border-radius: 25px;
    color: #4A4A4A;
    pointer-events: none;
}
 
#family1:disabled, #family1:disabled+label {
    background-color: rgba(0, 0, 0, 0);
    background-image: url(done.png) ;
    background-size: cover;
}

HTML5
1
2
<input name='Name1' type='radio' id='family1' value='О'>
<label for='family1'></label>

Все равно или я какой то рак безрукий или тут надо шамана звать =) не пашет ховер...

@mrtoxas · 14.08.2016, 22:15

У вас:

CSS
1
2
3
#family1:hover+label {
    background-color: rgba(217, 200, 20, 0.5);
}

Этот код сработает, если вы наведете указатель на chekbox, а он у вас скрыт и указатель вы на label наводите. Надо так:

CSS
1
2
3
#family1 + label:hover {
    background-color: rgba(217, 200, 20, 0.5);
}

@новый вася · 14.08.2016, 22:21 **[ТС]**

еще раз спасибо Вам, чето код ваще не клеется седня

@mrtoxas · 14.08.2016, 22:22

Все равно не работает?

@новый вася · 14.08.2016, 22:40 **[ТС]**

не не , уже поменял все ок, сделал

CSS
1
2
3
4
5
6
7
#family2:hover  + label:hover{
    background-color: rgba(217, 200, 20, 0.5);
} 
 
#family2 + label:hover {
    background-color: rgba(217, 200, 20, 0.5);
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.08.2016, 00:07
	Вопрос прост, описание не очень У вас есть три radio с label. Во все label вложены разные картинки. Вы хотите эти картинки сделать через background-image? Что должно происходить после того, как маркер покидает конкретный radio? Что должно происходить, когда конкретный radio получает маркер? А то от family голова идет кругом. 0

@новый вася 1 / 1 / 1 Регистрация: 22.01.2015 Сообщений: 40
	14.08.2016, 00:40 [ТС]
	просто прописать например для конкретного input + label по id картинку при такой структуре кода инпут не чекнутый не дисэйбл не ховер и т.д. просто инпут а там я дальше накалякаю одним словом перенести img ту что я заключаю между тегов label в style.css под background-image для конкретного елемента инпутов много но типажа три когда disabled напишу один фон когда не disabled напишу другой 0

@новый вася 1 / 1 / 1 Регистрация: 22.01.2015 Сообщений: 40
	14.08.2016, 22:21 [ТС]
	еще раз спасибо Вам, чето код ваще не клеется седня 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	14.08.2016, 22:22
	Все равно не работает? 0

Изменение фона label с помощью hover

Решение