Home/ Questions/Q 8168475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T20:32:23+00:00

I am trying to change the underline color during a hover event using spans

  • 0

I am trying to change the underline color during a hover event using spans and it works in IE9 and Firefox 13.01 but it doesn’t work in Chrome (it should underline in gold).

#menu li:hover span.underline {
text-decoration:underline;
color: #FAA301; }

<ul id="menu">
<li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li>
</ul>

Here is js.fiddle: http://jsfiddle.net/wuUpL/7/ .

I originally got the idea from this post https://stackoverflow.com/a/1175402/1490248 but that one doesn’t work in chrome either.

Note: I don’t want to use borders to fix this, I am already using borders as a border

Can anyone help me out here? Is there some sort of chrome hack/exception I could use to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I know you said you didn’t want to use borders here, but you have found something that doesn’t work the same between the two browsers.

    You can get this to work on Chrome by adding an inner span and using a border on it.

    http://jsfiddle.net/wuUpL/10/

    Sorry if it is not what you had in mind, but Gecko and WebKit are not agreeing on something here!

    • 0