0

I am using MVC3. I have a table and an Html.ActionLink inside of it. I have already set the text decoration for none, but the link is still blue. I change the table:hover background-color and the color(of the text), and when I put the mouse over the row, the text that are not a link gets white, but the link still blue. If I change the a:hover, the link gets white just when I put the mouse over it, and not just over the row.

Is there a way to do that with css?

Simon Whitehead
  • 63,300
  • 9
  • 114
  • 138
Andrey Lima Ramos
  • 69
  • 2
  • 11

2 Answers2

1

use the following css:

#yourTableId:hover a {
    color: #FFF;
}

you can replace #yourTableId also with table and / or .yourTablesClass depending on where the css should be used ;)

this works also for child elements e.g.:

#yourTableId div:hover a

#yourTableId tr:hover a

so in general we can say you can use the following:

#yourTableId *:hover a

where * is a tagname, classname or id (dont forget class and id prefixes -> .classname and #idname)

here a jsfiddle example

r3bel
  • 1,350
  • 8
  • 12
  • Might be worth noting that this works for lower level elements than a table.. so that you can only highlight the anchors on the row.. perhaps: #yourTableId tr:hover a – Simon Whitehead Aug 13 '12 at 23:32
1

Typically, to cover all the anchors when you are hovering over the row.

#tableid tr:hover a {
    /* Your Styles */
}

But this does not work on all IE browser so, use JS to catch the event and apply styles to anchors in it.

Starx
  • 77,474
  • 47
  • 185
  • 261
  • i would not any longer support IE < version 7 and in addition, i would not at all support a browser that does not support css2... [whencaniusehover](http://caniuse.com/#search=:hover) if it is not prescribed – r3bel Aug 14 '12 at 00:25
  • @r3bel, Yes, using scripting is the overall best solution. – Starx Aug 14 '12 at 00:35