CODEWITHSUNDEEP
cssmenuhoverborderstylesheet
Henrik Petterson
Henrik Petterson

Reputation: 7094

Change text color when hovering border-bottom

I have this code, please observe this fiddle: http://jsfiddle.net/VjhJ4/19/

When you hover over the words, the text color changes to white - which is how I want it. However, when hovering over the 20px border-bottom, the text color does not change to white. Just hover your mouse over the border-bottom and check.

How do I make so that the text color changes to white when you hover the bottom as well? I currently have hover settings on ul#secondary-menu a:hover { color: #FFFFFF;}

Upvotes: 0

Views: 898

Answers (3)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

Search for the string ul#secondary-menu a:hover { color: #FFFFFF;}

in your css style and replace it with

ul#secondary-menu li:hover a{ color: #FFFFFF;}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253396

Just add (or amend your existing CSS to include) the following:

#second-menu ul.nav li:hover a {
    color: #fff;
}​

JS Fiddle demo.

Can you explain why it was not changing the hover previously and how this helped. As I mentioned, my coding knowledge is limited so I am trying to learn what the issue was here

It wasn't changing the hover effects previously because you'd, presumably (and I am presuming, I gave up reading your CSS less than half-way through), specified a :hover rule for the a element that was a child of the li element, but the border is attached to the li, not the a. So hovering over the li's border had no effect.

This rule simply specifies that the colour of the a element within the li should be white (#fff) in response to the mouse hovering over the li element. In practice, placing this rule at the end of the stylesheet caused it to override any other conflicting rules that might have been declared elsewhere (and, once again, I gave up reading the stylesheet due to its length).

I'd recommend finding whatever rule you have that defines the a:hover effects, and add the two rules together, for example:

#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
    color: #fff;
}

The specificity may not need to be quite so high, so you might be able to reduce the selector, to something shorter like:

ul.nav li a:hover,
ul.nav li:hover a {
    color: #fff;
}

Oh, and it's worth noting that you have quite a mix of in-line (style="...") and external styles (using a stylesheet); try and use only the external form, for clarity and for ease of updating, editing and maintaining.

Upvotes: 2

Matt Coughlin
Matt Coughlin

Reputation: 18906

If you want the border to be a part of the hyperlink (that is, the user can click on the hyperlink when the mouse is over the border), then you'll need to remove the border from the li and add it to the hyperlink instead. If necessary, add display:inline-block to the hyperlink.

If the border doesn't need to be a part of the hyperlink, then @David Thomas's suggestion should be all you need.

Modified demo

Upvotes: 1

Related Questions