CODEWITHSUNDEEP
csscss-selectors
Jason Weber
Jason Weber

Reputation: 5741

How can I overrule default css settings on a:hover hyperlinked images?

I have a printer-friendly/PDF image that looks like this:

printerfriendly

Okay, simple enough. When hovering over it, however, the background turns gray, as I have my default hyperlinks set to this, for example:

#footer a:hover {
color: white;
background-color: #636363;
-moz-transition: all .6s linear;
-webkit-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
text-decoration: none;
outline: none;
}

So the question becomes, what css rule can I use on this WordPress domain to stop that background-color from happening? I'd like NO background color when hovering over images. Here's what I've tried:

.printfriendly a:hover img {
background-color: transparent !important;
opacity: 1.0 !important;
}

Among other things, but that just doesn't work. Here is what I see in Firebug:

printfriendly-firebug

And when I right-click and "copy html" to that selection, this is the html output:

<div class="printfriendly pf-alignright"><a onclick="window.print();if(typeof(_gaq) !=    
'undefined') { _gaq.push(['_trackEvent','PRINTFRIENDLY', 'print', 'NULL']);} return false;" 
rel="nofollow" href="http://www.printfriendly.com/print?url=http://www.occupyhln.org/occupy-
hln-hall-of-heroes/"><img alt="Print Friendly" src="http://cdn.printfriendly.com/pf-button-
both.gif" style="border:none;-webkit-box-shadow:none; box-shadow:none;"></a></div>

So I'm pretty much at a loss -- which is happening less and less with CSS, as I'm learning more, experimenting and reading, but any help anybody can offer me as to how to get rid of that background-color when hovering over the print/pdf image would be greatly appreciated! IF need be, there is an example here: http://www.occupyhln.org/occupy-hln-hall-of-heroes/

Upvotes: 0

Views: 1290

Answers (1)

Nix
Nix

Reputation: 5998

The background colour is not on the image, but the link itself.

.entry-content a:hover { background: none; }

Upvotes: 1

Related Questions