I have a printer-friendly/PDF image that looks like this:
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:
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/
The background colour is not on the image, but the link itself.
.entry-content a:hover { background: none; }
Related
I'm using the validator (https://validator.ampproject.org/) to convert my page's invalid css to AMP friendly, according to the website (https://www.ampproject.org/docs/guides/responsive/style_pages) transition is limited to only opacity and transform. Yet I have color animations all over the css, the validator doesn't seem to care about them.
Is the validator incorrect or outdated? Has anyone else run into this? Perhaps AMP allows color transitions now? Thanks!
Ex snippet from my code:
<style amp-custom>
a {
background-color: transparent;
color: #1274b8;
text-decoration: none;
cursor: pointer;
transition: color .25s ease-out, background-color .25s ease-out; //this is valid and passing
}
a:hover {
color: purple;
}
</style>
I have this site: http://bit.ly/1p1Dr9W
This navigation looks kind of blank. I'd love to add css animation to it. I tried using opacity, but it does not work as intended. What am I doing wrong?
I added hover animation over each navigation elements and it works fine, but I'd like to add animation to whole navigation menu, so the whole list of sub menu elements would open with some animation (for example slow opacity to 1).
This is what i got:
#menu-menyy li ul {
background-color: transparent; }
#menu-menyy li ul:hover {
background-color: #00a3fc !important;
-o-transition:.8s;
-ms-transition:.8s;
-moz-transition:.8s;
-webkit-transition:.8s;
transition:.8s;}
But whole navigation menu still just pops open, and as i move my mouse over the actual menu, i see the transition in the background. Can this be done in CSS afterall or it is made with jquery?
Change css to
#menu-menyy li ul {
opacity: 0; }
#menu-menyy li:hover ul {
background-color: #00a3fc !important;
opacity: 1.0;
-o-transition: opacity .8s;
-ms-transition: opacity .8s;
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
}
I'd like to ask if there is a solution for a little inconvenience I've encountered with a dashed links.
To save your time here is an example of my code, upon hovering specifically on a dashed line underneath an actual link it starts blinking immensely and it is not very aesthetically appealing. I'm fairly new into the css so I wonder if there is a mistake in my code.
p {
font-size: 35px;
}
a {
text-decoration: none;
color:#ff0089;
text-decoration: none;
border-bottom-color: #ff0089;
border-bottom-width: 2px;
border-bottom-style: dashed;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
transition:color .2s ease-out, background 1s ease-in;
}
a:hover {
color:#eae327;
background: none;
border-bottom-style: none;
}
http://jsfiddle.net/j86ba/
Much obliged.
It happens because the border disappears on hover - turning of the hover functionality. So then the line reappears making in onHover again... (loop)
The solution I found was to set the color to white (or, whatever your background may be) instead of setting style to none. (I tried setting width to 0, but it had the same effect).
See fiddle
Seems hackish, but it works...
I would add that the probability of a user actually hovering exactly on the line (which triggers this behavior) is unlikely and probably shouldn't worry you. i.e. see comments on the question where people who were actually trying to make it happen couldn't reproduce the issue.
JNF's answer is good or you can hack by using this too in your anchor style :
display: inline-block;
height: 40px;
It works perfectly in Firefox, the inspection shows it's affecting the .search-input class, yet it doesn't show the background color, it shows a border, and basically the only things that are showing are the height, width and padding.
How it looks in Chrome
How it looks in Firefox (correct form)
There's no conflict in the theme, absolutely no results come out when searching for #abadb3 (the border's color). It's like if google was overwritting my css perhaps?
I'm using google chrome Version 27.0.1453.110 m
The markup:
.topbar > div .search-input {
height:49px;
border:none;
width:49px;
background-color:#F00;
background-image:url(img/i_magni.png);
background-repeat:no-repeat;
padding-left:49px;
float:right;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;}
.topbar .search-input:focus {
width:310px;
padding-left:55px;
background-position:bottom left;}
Thanks for your help in advance.
Add the following CSS:
-webkit-appearance: none;
Fixed it, apparently you need to add -webkit-appearance: none; for it to work like it should.
I have a menu where the elements have a simple animation on hover, changing background color and text color.
Since the element has a border with outset style, I would like to change it to inset to make it look coming forward. However the transition doesn’t seem to work for the border-style property, so the final effect doesn’t look very well, as the change in border style happens immediately and only later the background changes.
Any ideas how to make this work? I found it strange that border-style can‘t be transitioned. If so, any turnaround?
Here’s the code:
#main_menu a, #main_menu li {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
} /*Hover animation */
#main_menu li:hover { background: #4488CC; border-style: inset; }
#main_menu li {
/*GRAPHICS*/
list-style: none;
border: 3px outset #496181;
margin: 10px;
background: #333;
PS: I don’t want to use jquery for this
Your question may have been hastily written, but I think you're missing an _ in the first selector. Also, it seems that you're animating the border-style from outset to outset, so you won't see any differences. It does indeed work, I've created a demo that changes the border-color on jsfiddle for you to take a look at.
Another solution would be to create the border as a button image and stretch it in the div and just use box-shadow. That way your user will still see a smooth button movement by the transition in the shadow.