CODEWITHSUNDEEP
css
UxBoD
UxBoD

Reputation: 35

Glyphicons change color on hover plus a text link

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.

Upvotes: 2

Views: 8688

Answers (4)

yugi
yugi

Reputation: 874

css

.no:hover [class*="glyphicons"]:before {
 color: yellow !important;}

Upvotes: 1

Bart Az.
Bart Az.

Reputation: 1645

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

Upvotes: 0

Chad
Chad

Reputation: 5418

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.

Upvotes: 3

user2669157
user2669157

Reputation: 114

HTML:

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

CSS:

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

Upvotes: 0

Related Questions