Trouble with the most basic of basic jQuery questions

Question

I am struggling to fathom why the following fiddle won't work? Just trying to add a class!

Just starting out.

Thanks, and please don't downgrade me... I know its basic.

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

On your CSS the declaration:

li .hover

Targets an element with class .hover inside li like:

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

You need:

li.hover

An element li with class hover. Will match:

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

The demo http://jsfiddle.net/JGqAX/1/

Answer 2

You have a mistake not in JS, but in CSS: an extra space between li and .hover

li.hover {
    background-color:blue;
}

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

Answer 3

It's not jQuery, it's your css selector, which should be:

li.hover

which selects "li elements with the class hover", instead of:

li .hover

which selects "elements with the class hover that are descendants of li elements"