Change anchor tag on "ul.search_results li:hover" just like Facebook

HTML & CSS
1

Hello everyone.

I’m new to this forum so please help me so I can have a positive feedback to spread around.

I just created a custom built, AJAX powered, live search for a friend of mine. He wanted it to look just like facebook and my design has so far been successful. The only bump that I encountered was this:

I want to change the anchor link(<a>) color from black to white when I hover on the list item (<li>). Basically it needs to be some type of implementing which I’m personally not aware of.

Here’s what I have so far:

ul.search_results li
{
display: block;
padding: 5px 10px 5px 10px;
margin: 0px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
text-align: left;
color: #505050;
background-color: #fff;
text-decoration: none;

}

ul.search_results li:hover
{
background-color: #6D84B4;
border-top: 1px solid #557;
border-bottom: 1px solid #557;
font-color: #fff;
}

then I have

ul.search_results li a
{
color: #000;
margin-left: 0px;
padding-left: 0px;
text-decoration: none;
font-size: 143%;
font-family:"Times New Roman",Georgia,Serif;
}
ul.search_results li a:hover
{
color: #fff;
}

So basically this does the job, but not perfectly. The font of the anchor link changes only when you hover on that particular link and not on the list item. I basically want it to look like facebook live search box.

Any ideas?

Thank you!:0

2

Hi, that’s because you ahve this

ul.search_results li:hover
{
background-color: #6D84B4;
border-top: 1px solid #557;
border-bottom: 1px solid #557;
[B]font-color:[/B] #fff;
}

Make it color: :slight_smile:

3

Ryan found more of a typo than the actual problem you were asking for - Try swapping:

ul.search_results li a:hover

for:

ul.search_results li:hover a

You just had the hover on the wrong element. You want the anchor to change when the ENTIRE LI and any of it’s contents (like a dropdown UL) is hovered, you need the hover on the LI, not the anchor. Just be careful since the entire ‘apparent’ button area may not actually be able to be clicked - I’d have to see it though to be sure.

4

I was under the impression his first snippet wasn’t working so thus he went to the second, if that’s the case, then I’m sorry I misunderstood :).

He could set the anchor to display:block and thus it would encompass the entire <li> thus no need to switch the hover to the <li> (which wouldn’t work in IE6 :))

5

I was thinking that - but if the other part of the LI’s content isn’t inline-level… The way I read it I figured he had a DIV or UL nested next to the anchor since that’s the only reason you’d probably want something other than the anchor as the hover hook…

6

Thank you both. I did notice the typo last night. I was not intended to be there. I was just experimenting. As you can tell, I’m not the greatest designer out there.

I’m in school right now, but I will try to see if I can fix it and will let you know if the changes work. It seems though, at least theoretically, that the “swapping” would work.

Thank you both!

7

It worked.Thank you so much deathshadow.

8

Yes his code was indeed ambiguous at the best, I assumed a standard structure as this

<li><a href="#">Text</a></li>

THat’s what a normal <li> looks like (the dropdown wouldn’t affect it, as it is (should) be AP’d) :slight_smile:

At any rate, he has found a solutino :slight_smile: