У меня есть флажки, которые у меня установлены для ярлыков, и я использую код, который применяет эффект при зависании. Однако при проверке на скрипке эффект зависания остается, когда он выбран, и не показывает фактический флажок галочки, только проблема со скрипкой заключается в том, что это работает только при последнем проверке не всех.
Однако, когда я применяю это на своем сайте, действует только эффект зависания, эффект не остается на выбранном, а галочки остаются видимыми.
Сценарий: http://jsfiddle.net/Zgh24/1169/
Единственные различия между тем, что в моем коде, что DIV, в котором он находится, также имеет классы, я использую bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
Итак, моя проблема - это что-то вроде 2, у меня есть Fiddle, который делает то, что я хочу, а затем скрипка, которую у меня есть, не полна, когда я ее реализую.
Я предполагаю, что у меня, возможно, есть css, который противоречит тому, что я пытаюсь сделать, но я не вижу, как и что.
Любая помощь очень ценится -Tom
Вы можете использовать только псевдо-класс CSS :checked
и настраивать следующий ярлык:
input[type=checkbox]:checked + label img
Наконец, вы должны использовать в качестве правил CSS:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
FYI, вы могли бы пожелать в некоторых случаях использовать вместо checkboxes
radio
кнопки, как в этом jsFiddle:
http://jsfiddle.net/Zgh24/1173/
Это может позволить вам использовать устойчивый стиль для какого-то элемента, используя только CSS с радио-кнопками hiddden:
Может быть, не уверен, что класс.selected используется ядром bootstrap и этот стиль применяется к вашему элементу метки.
Используйте свой браузер, чтобы узнать, какой стиль применяется.
input[type=checkbox]:checked + label img { background-color: #ccc; }
jsfiddle.net/Zgh24/1170 Может быть, не то поведение, которое вы ожидаете