2

I am trying to use Glyphicons for a portal idea and when the icon is hovered over the associated link also changes color.

<div class="portal">
<table>
<tr>
<td><div align="center"><a href="clientarea.php" class="glyphicons home"/></a></div></td>
<td><strong><a href="clientarea.php">Home</a></td>
</tr>
</table>
</div>

I have tried the following 

.portal a:hover {
color: #BC2328;
}

.portal a:hover:before {
color: #BC2328;
}

But that only changes one at a time where as I would like both the icon and text url to change color; which either one is hovered over.

Help appreciated.

UxBoD
  • 35
  • 1
  • 7
  • Not that it's necessarily relevant to the problem, but you have a self-closing `a` element *and* a separate closing element for it... Personally, I'd also close the ``, but maybe I'm fussy. – Matt Gibson Oct 25 '13 at 14:59
  • This post may help: http://stackoverflow.com/questions/10803217/using-css-to-give-a-black-icon-another-color – user2669157 Oct 25 '13 at 15:01
  • 1
    I would venture to say that you have to manually change it because you manually set the color of the pseudo element before. If you only color the anchor tag, then you should only have to do `.portal a:hover` – Chad Oct 25 '13 at 15:03

4 Answers4

3

Like I said in my comment, I think the issue lies in that you set the specific color of the pseudo element. If you let the pseudo element read off of the styles of its parents, it will change colors with it.

You can see in this example how the first anchor tag has a specific color set on the pseudo element, whereas the second reads from its parent.

<a href="#" class="setColor">This pseudo element has a specific color set</a>
<a href="#" class="noSetColor">This pseudo element has no specific color</a>

.setColor { color: #f00; }
.setColor:before { color: #f00; content: '#'; }
.setColor:hover { color: #00f; }

.noSetColor { color: #0f0; }
.noSetColor:before { content: '#'; }
.noSetColor:hover { color: #f0f; }

In short, less is more.

Chad
  • 5,308
  • 4
  • 24
  • 36
  • Appreciate the responses. Perhaps I am missing something when reading through them but none appear to address changing to elements at once. If the HTML I posted you see that the first TD element is a href that uses a Glyphicon, and the second has text with a href around it. I can get the CSS to the point that when I hover the text the icon and text changes, but not when if I just hover over the icon, the text does not change color. I did try via this link http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements – UxBoD Oct 25 '13 at 16:20
  • Oh, so you're looking to change two elements, and not one element and its pseduo? – Chad Oct 25 '13 at 16:32
  • Yep, would love to be able to make the href's links both change color. So that the icon and link text change on which ever are hovered over. Sorry if I have been unclear :( – UxBoD Oct 25 '13 at 17:17
  • In that case try `.portal div:hover a { color: #f00; }` or something. – Chad Oct 25 '13 at 18:01
1

css

.no:hover [class*="glyphicons"]:before {
 color: yellow !important;}
yugi
  • 834
  • 1
  • 15
  • 28
0

you can try to select both elements by adding :hover pseudoclass to the parent div like this (not tested):

.portal:hover a, .portal:hover a:before {
    color: #BC2328;
}

EDIT

Thanks to Chad's comment it occured to me that it is a bad practice. Therefore you should wrap your anchor tags in a separate wrapper or give this anchor an icon in a different way. I would suggest doing sth like this (tables get a little messy sometimes):

HTML:

<div class="portal">
    <a class="certain-icon" href="clientarea.php" title="Home">Home</a>
</div>

CSS:

a.certain-icon { padding-left: 30px; line-height: 20px; background: url(certain-icon.png) left center no-repeat; }
a.certain-icon:hover { color: #BC2328; background: url(certain-icon-active-state.png) left center no-repeat; }

Where padding-left is icon's width + some margin and line-height (or just height but the first one vertically centers your's anchor text) is icon's height

Bart Az.
  • 1,644
  • 1
  • 22
  • 32
0

HTML:

<td><div align="center" class="mydiv"><a href...

CSS:

.mydiv:hover a {color: #BC2328;}
user2669157
  • 114
  • 5