I have a printer-friendly/PDF image that looks like this:
Simple enough. However, when hovering over it, the background turns grey due to default hyperlink styles set as follows:
#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;
}
The question now is, what CSS rule can I use on this WordPress domain to prevent the background-color change? I want NO background color when hovering over images. Here's what has been attempted:
.printfriendly a:hover img {
background-color: transparent !important;
opacity: 1.0 !important;
}
Despite trying various alternatives, this solution does not work. When inspecting with Firebug, the following HTML output is revealed upon right-clicking and "copy html" of the selection:
With backgrounds in learning and experimenting more with CSS, any assistance on how to eliminate the background-color change when hovering over the print/PDF image would be greatly appreciated! For reference, an example can be viewed here: