a:hover

AlexW · February 26th, 2011, 11:56 AM

I have a content slider that has stopped showing the hover colour on the mouse hover.

My ASPX is:
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="ContentSlider/Images/image2-small.jpg" alt="" />[Hardware]</a></li>

My CSS is:
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}

- but nothing happens when I hover over this link?? Any help appreciated.

disel2010 · February 27th, 2011, 03:54 AM

Hi,

since you have an #id selector it only works for me if you :
- either omit that #id selector from the css
- or adjust the html so it matches the complete combined selector as follows :

Code:

 
<div id="featured" >
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="ContentSlider/Images/image2-small.jpg" alt="" /><span class="Heading">[</span><span class="HeadingLetter">H</span><span class="Heading">ardware]</span></a></li>
</div>

I hope this helps

AlexW · February 27th, 2011, 07:28 AM

Hi disel,

Why would I want to remove the #featured CSS when this is setting the hover instruction? And the code you posted matches what I have, have you changed anything? Is there any reason the hover action isnt working? I cant see anything counteracting it in the CSS...

disel2010 · February 27th, 2011, 08:55 AM

Hi Alex,

in the example html I added a div element with an id="featured"
(in order to match the css selector #featured li.ui-tabs-nav-item a:hover)

The example html you posted only matches the css selector li.ui-tabs-nav-item a:hover

I hope this is clear for you.

AlexW · February 27th, 2011, 10:03 AM

Oh I see, I think this is already the case though because the code is nested in:
<div id="featured" >
<ul class="ui-tabs-nav">