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;
Related
I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
I've a h1 text that is very faded on a background. Once you roll over it / hover over the block that it is in, it slowly start to light up until it is completely white. This is great and just like I want it to be. Here's the problem. Once you leave the hover, the color goes back to being faded. I'd like for it to stay white as the whole point of having it faded is that it should not be in your sight until you are hovering past it.
TL:DR / When I hover a h1 it starts to light up, I want the new color to remain after you remove the hover.
The HTML I use
<h1 style="color: #fff;">Sammen flytter vi<br> de digitale grænser.</h1>
The CSS I use
.lovernemarketingtitle h1 {
font-size: 50px;
line-height: 54px;
font-weight: 900;
opacity: 0.5;
}
.lovernemarketingtitle:hover h1 {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
SOLUTION BY PRAVEEN KUMAR
http://jsbin.com/dufarofoto/1/edit?html,css,output
Use transition-delay, but beware, improper use affects the hovered state as well.
a {text-decoration: none; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 3px; line-height: 1; color: #000; transition: all 0.5s linear 2s;}
a:hover {transition: all 0.5s linear 0s; background: #ccf;}
Hover Me<br />
Lights up immediately but goes back after 2 seconds.
ps: There's no opacity: 2.
I guess I should start this off by saying that I'm working on a tumblr theme. This is what the link code looks like:
a {
color: {color:Text};
text-decoration: none;
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #C1FFC1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
Now this code works perfectly fine; however, images that are links -- and just about every photo post IS a link -- show up with a green background, which is fine for text, but ugly for a picture.
I tried to use the following code to get rid of this:
a img {
border-width: 0px;
background: none;
}
This didn't work, however, and the background was still there.
If any of you want to check my theme out, here is a link to the blog: http://queenquagsire.tumblr.com (Just thought I should say, since this is not a professional website, and I'm only using it for testing purposes some -- well, all -- of the posts are pretty childish.)
The green background is kinda hard to see, but it's behind the center of image post, and sticks out. Also, when you hover over it, it disappears.
I feel like this is very simple, but I still can't seem to fix it; I've visited other websites and tried their solutions, but had no luck.
Also, I did try to change the link code to this
p a {
color: {color:Text};
text-decoration: none;
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #C1FFC1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
so it only affected paragraphs, but that messed some other things up.
Can anyone help? Am I going to have to edit the link code itself?
CSS cannot look at an element’s children when deciding how to style that element. You’ll have to change the HTML part of your template to add a special class to image posts (say, image-post), and then style all a elements within one specially:
.image-post a {
background: none;
}
Historical note: An old draft of CSS3 from 2001 did specify a pseudo-class that could be used to select on an element’s content. However, all subsequent drafts have blanked that section out.
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; }
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.