I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS) The markup is now something like this:

<ul id="navbar">
<li class="navgroup">
	<ul>
		<li class="navicon"><i class="icon-home"></i></li>
		<li class="navname">Home</li>
	</ul>
</li>
<li class="navgroup">
	<ul>
		<li class="navicon"><i class="icon-info"></i></li>
		<li class="navname">Information</li>
	</ul>
</li>
<li class="navgroup">
	<ul>
		<li class="navicon"><i class="icon-contact"></i></li>
		<li class="navname">Contact</li>
	</ul>
</li>
</ul>

Of course everything is {display:inline}

You should use the following css:

<!-- language: lang-css -->

.navgroup:hover .navicon {
    background-color: blue;
} 

It will modify just the navicon anytime you hover anywhere within the navgroup

See this jsFiddle