Флажок с изображением флажка Выберите эффект, применяемый только при наведении, но не при установленном

0

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

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

Сценарий: 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

  • 1
    Даже не связанный с вашей проблемой, но вы не могли использовать только CSS: input[type=checkbox]:checked + label img { background-color: #ccc; } jsfiddle.net/Zgh24/1170 Может быть, не то поведение, которое вы ожидаете
  • 0
    @A.WolffA.Wolff Да, идеальное поведение, размещенная мною скрипка была адаптирована к другому вопросу, но ваш, кажется, делает то же самое и лучше :) и работает так, как задумано на моем сайте!
Показать ещё 4 комментария

2 ответа

1
Лучший ответ

Вы можете использовать только псевдо-класс CSS :checked и настраивать следующий ярлык:

input[type=checkbox]:checked + label img

Наконец, вы должны использовать в качестве правил CSS:

#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
    background-color: #ccc;
}

ДЕМО jsFiddle

FYI, вы могли бы пожелать в некоторых случаях использовать вместо checkboxes radio кнопки, как в этом jsFiddle:

http://jsfiddle.net/Zgh24/1173/

Это может позволить вам использовать устойчивый стиль для какого-то элемента, используя только CSS с радио-кнопками hiddden:

http://jsfiddle.net/Zgh24/1174/

0

Может быть, не уверен, что класс.selected используется ядром bootstrap и этот стиль применяется к вашему элементу метки.

Используйте свой браузер, чтобы узнать, какой стиль применяется.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню