Мне нужно иметь возможность изменить цвет фона li при выборе с помощью мыши. используя только CSS

Question

У меня есть ul меню со ссылками li's no a: и мне нужно иметь возможность изменять цвет фона li при выборе мышью.

    <div id="dvMainNavMenu">
        <ul id="NavItem">
        <li>Nav Item</li> 
          <li>Nav Item</li>   
          <li>Nav Item</li> 
        </ul>
    </div>

#NavItem li  {background-color: transparent; text-decoration: none; }
#NavItem li:hover {background-color: #ff8700;}
#NavItem li:focus {background-color: #ff8700;}

фокус не работает; (может кто-нибудь мне помочь?

Answer 1

Это возможно, если вы понимаете, что неинтерактивный элемент (например, input, select, a ...) не может быть сфокусирован.Он может отвечать на псевдокласс :active, но он не будет сохраняться после отпускания мыши (и будет переопределен действием выделения по умолчанию при перемещении мыши):

#NavItem li  {background-color: transparent; text-decoration: none; }
#NavItem li:hover {background-color: #ff8700;}
#NavItem li:active {background-color: #f00;}

JS Fiddle demo .

Важно помнить, что CSS используется для презентации.JavaScript (и, возможно, другие языки, такие как dart ) используются для слоев функциональности / поведения / взаимодействия поверх содержимого, предоставляемого HTML.

Использование JavaScript isn 't форма "обмана".

Answer 2

Что, если вы использовали : целевой псевдокласс в сочетании со ссылками. Отрицательным является то, что вы можете выделить только один за раз. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.

    <div id="dvMainNavMenu">
      <ul id="NavItem">
        <li><a href="#item1" id="item1">Nav Item</a></li>   
        <li><a href="#item2" id="item2">Nav Item</a></li> 
        <li><a href="#item3" id="item3">Nav Item</a></li> 
      </ul>
    </div>

#NavItem li  {background-color: transparent; text-decoration: none; }
#NavItem li:hover {background-color: #ff8700;}
#NavItem li:focus {background-color: #ff8700;}
#NavItem li a { display:block; }
#NavItem li a:target { background-color:black; }

Очевидно, это будет работать только в определенных сценариях, поэтому может соответствовать или не соответствовать тому, что вы пытаетесь сделать, и это не универсальная поддержка браузера (IE9 и выше) .

Answer 3

Элементы, которые не являются входными данными или не «заслуживают внимания» [© / ™ / etc.], Не будут признавать псевдоклассы :focus, :active и т. Д., Которые предлагает CSS.Возможно, вы могли бы взломать его с помощью якоря (<a>), но теперь у вас остается предоставление цели href и, опять же, без вмешательства javascript вы будете либо прокручивать окно до названного идентификатора привязки / совпадающего идентификатора, либопопытка взломать любые другие эффекты, используя <a>.А без href вы теряете много врожденных способностей.

С учетом сказанного маленький javascript может делать именно то, что вам нужно, оставаясь при этом (относительно) легким.И, в худшем случае, браузер, который либо не поддерживает javascript, либо отключает его, может использовать только :hover способность.

С этим вот альтернатива javascript:

Создайте класс:

#NavItem .active { background-color: #FF8700; }

Затем:

var ul = document.getElementById('NavItem');
if (ul){
    var li = ul.getElementsByTagName('li');
    for (var i = 0; i < li.length; i++){
        li[i].onclick = function(e){
            var re = /\b(active)\b/;
            if (this.className.test(re)){
                this.className = this.className.replace(re,'').replace(/^\s+$/,'');
            }else{
                this.className += ' active';
            }
        }
    }
}

Или хороший метод jQuery:

$('#NavItem li').click(function(e){
  $(this).toggleClass('active');
});