Как я могу активировать стиль CSS для маркировки при парении над связанным флажком?
Каждый раз, когда я нависаю над маркировкой флажка, это становится желтым:
Разметка
<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
<label for="hello">hello</label>
CSS
label:hover, label:active {
background:yellow;
}
Когда я нависаю над связанным флажком, я хочу, чтобы маркировка выделилась. Существует ли способ запустить то же правило при наведении курсора с помощью CSS, если я нависаю над флажком также? Или я должен буду использовать JavaScript для этого...?
11
задан Shog9 29 July 2010 в 04:09
поделиться
3 ответа
Вы можете использовать селектор CSS sibling, например, такой:
label:hover, label:active, input:hover+label, input:active+label {
background:yellow;
}
Обратите внимание, что это не будет работать в IE6.
17
ответ дан 3 December 2019 в 04:12
поделиться
Просто установите флажок внутри метки:
<label for="hello">
<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
hello
</label>
Теперь, когда вы наводите курсор на флажок, вы также будете наводить курсор на метку, и ваших существующих правил будет достаточно, чтобы выделить ее.
6
ответ дан 3 December 2019 в 04:12
поделиться
Решение jQuery:
$(document).ready(function(){
$('#hello, label[for="hello"]').hover(function(){$(this).addClass('.hover');},
function(){$(this).removeClass('.hover');});
});
...
.hover
{
background-color: yellow;
}
И это ДЕЙСТВИТЕЛЬНО работает в IE6.
2
ответ дан 3 December 2019 в 04:12
поделиться
Другие вопросы по тегам: