Проблема с самыми основными основными вопросами jQuery

Question

Я изо всех сил пытаюсь понять, почему следующая скрипка не будет работать? Просто пытаюсь добавить класс!

Простое начало.

Спасибо, пожалуйста, не меняйте меня ... я знаю его основные.

HTML:

<ul> 
    <li class="box">a</li> 
    <li class="box">b</li> 
    <li class="box">c</li> 
    <li class="box">d</li> 
</ul> 

CSS:

li { 
    height:20px; 
    width:20px; 
    background-color:red; 
    display:inline-block; 
} 

li .hover { 
    background-color:blue; 
} 

JQuery:

$('li').addClass('hover'); 

http://jsfiddle.net/JGqAX/

Answer 1

На вашем CSS декларация:

li .h более

Мишени элемент с классом .hover внутри li как:

<li> <p class="hover">Select this element</p> </li> 

Понадобится:

li.hover

Элемент li с классом hover. Будет соответствовать:

<li class="hover">Make me blue</li> 

http://jsfiddle.net/JGqAX/1/ демо-

Answer 2

Это не JQuery, это ваш селектор CSS, который должен быть:

li.hover 

, который выбирает "li элементы с классом hover", вместо:

li .hover 

, который выбирает "элементы с классом hover, которые являются потомками li элементов"

Answer 3

Вы ошибку не в JS, но в CSS: дополнительное пространство между литий и .hover

li.hover { 
    background-color:blue; 
} 

http://jsfiddle.net/JGqAX/2/