As the title says, I got a hover effect for my links but the whole page is affected for some reason.
This is my style
a:hover, :visited, :active, :hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}
https://jsfiddle.net/3qpbv5fo/
By the way, while you're at it. Is my code readable so far? would you get what I was doing if you had to continue building the website? Just for me to get better.
You're saying :hover among others with no element before it, so it refers to everything.
It's not sufficient to select the a element in the first selector only, if you put a comma between things, they get treated as completely separate selectors. So a:hover, :hover for example would be read as a:hover and *:hover.
See this for a guide on how to style links correctly.
Remove :hover because it is applying the effect to every possible element, ID and class on the page. Your a:hover is sufficient and will apply the effect on all hovered links.
you have to prefix :hover , :visited ... etc with a specific tag or it will effect the whole page.
do this instead
a:hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}
You can't have a:visited and a:active have the same CSS as your a:hover because it won't work right. You need to make a seperate block of CSS for these. a:hover will effect all your link elements, even the visited ones.
you use :hover 2 times in your css that mess up your code. you should omit last :hover in order to work your code correctly
Related
Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter, is there a CSS equivalent to on Mouse Leave?
Example:
I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from #999 to black. How can I create the opposite effect when the mouse leaves the item area, with an animation from black to #999?
jsFiddle
(Have in mind that I do not wish to answer only this example, but the entire "opposite of :hover" issue.)
If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:
ul li a {
color:#999;
transition: color 0.5s linear; /* vendorless fallback */
-o-transition: color 0.5s linear; /* opera */
-ms-transition: color 0.5s linear; /* IE 10 */
-moz-transition: color 0.5s linear; /* Firefox */
-webkit-transition: color 0.5s linear; /*safari and chrome */
}
ul li a:hover {
color:black;
cursor: pointer;
}
http://jsfiddle.net/spacebeers/sELKu/3/
The definition of hover is:
The :hover selector is used to select elements when you mouse over
them.
By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}
The opposite is using :not
e.g.
selection:not(:hover) { rules }
Just use CSS transitions instead of animations.
A {
color: #999;
transition: color 1s ease-in-out;
}
A:hover {
color: #000;
}
Live demo
Put your duration time in the non-hover selection:
li a {
background-color: #111;
transition:1s;
}
li a:hover {
padding:19px;
}
Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.
.element {
width: 100px;
transition: all ease-in-out 0.5s;
}
.element:hover {
width: 200px;
transition: all ease-in-out 0.5s;
}
No there is no explicit property for mouse leave in CSS.
You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be.
I think you have to look at a JS / jQuery solution.
Another way of using transition is just specifying the milliseconds like so: transition: 500ms;
Try the following snippet
div{
background: DeepSkyBlue;
width:150px;
height:100px;
transition: 500ms;
}
div:hover{
opacity: 0.5;
cursor:pointer;
}
<div>HOVER ME</div>
You can use CSS3 transition
Some good links:
http://css-tricks.com/different-transitions-for-hover-on-hover-off/
http://www.alistapart.com/articles/understanding-css3-transitions/
Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need
ul li {
display: inline;
margin-left: 20px;
}
ul li a {
color: #999;
transition: 1s;
-webkit-animation: item-hover-off 1s;
-moz-animation: item-hover-off 1s;
animation: item-hover-off 1s;
}
ul li a:hover {
color: black;
cursor: pointer;
-webkit-animation: item-hover 1s;
-moz-animation: item-hover 1s;
animation: item-hover 1s;
}
#keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-moz-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-webkit-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-moz-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-webkit-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
</ul>
Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).
Use the :hover selector to change the style of a button when you move
the mouse over it.
Tip: Use the transition-duration property to determine the speed of
the "hover" effect:
Example
.button {
-webkit-transition-duration: 0.4s; /* Safari & Chrome */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.
You have misunderstood :hover; it says the mouse is over an item, rather than the mouse has just entered the item.
You could add animation to the selector without :hover to achieve the effect you want.
Transitions is a better option: http://jsfiddle.net/Cvx96/
The opposite of :hover appears to be :link.
(edit: not technically an opposite because there are 4 selectors :link, :visited, :hover and :active. Five if you include :focus.)
For example when defining a rule .button:hover{ text-decoration:none } to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with .button:hover, .button:link{ text-decoration:none }
This of course only works for elements that are actually links (have href attribute)
This will add background color to the .icon when hovered and background fades when mouse pointer left the element..
.icon {
transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
background-color: rgba(169, 169, 169, 0.9);
}
I have transition that fade in/out my underlined text-decoration. It works perfectly on every browsers, except on Safari that doesn't make the fade in/out transition.
I have added -webkit-, as indicated on the MDN to make it work on Safari, but it doesn't seem to solve the problem (and I can't use border-bottom).
Here is my CSS:
.posts a:link {
text-decoration: underline solid transparent;
transition: text-decoration 0.3s ease;
-webkit-transition: text-decoration 0.3s ease;
}
.posts a:hover {
text-decoration-color: black;
}
I am using css to make an underline come under a span:
CSS:
.un{
text-decoration:none;
transition: all .5s ease-in;
}
.un:hover{
text-decoration:underline;
}
HTML:
<span class="un"> Underlined Text - Or to be underlined </span>
The underline simply appears, it doesn't move in over .5 seconds, like the transition should apply. Why not? How can I make this work?
Updated for 2021:
The support for text-decoration-color has come a long way, and common browser support requirements have loosened making it a viable option for most new projects. If you are only seeking a color transition, and can do without IE support, see this answer below.
Original answer:
You cannot change the color of the text-decoration independent of the color. However, you can achieve a similar effect with pseudo elements:
.un {
display: inline-block;
}
.un::after {
content: '';
width: 0px;
height: 1px;
display: block;
background: black;
transition: 300ms;
}
.un:hover::after {
width: 100%;
}
<span class="un">Underlined Text - Or to be underlined</span>
That is the most customizable way to do it, you can get all sorts of transitions. (Try playing around with the margins/alignment. You can make some awesome effects without adding to your HTML)
But if you just want a simple underline, use a border:
.un {
transition: 300ms;
border-bottom: 1px solid transparent;
}
.un:hover {
border-color: black;
}
<span class="un"> Underlined Text - Or to be underlined </span>
A proper solution that will work with multiple line text and doesn't require border-bottom mockup should look like this. It utilizes text-decoration-color property.
Have in mind that it's not supported by old browsers
.underlined-text{
text-decoration: underline;
text-decoration-color: transparent;
transition: 1s;
/*add those for opera and mozilla support*/
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
}
.underlined-text:hover{
text-decoration-color: red;
/*add those for opera and mozilla support*/
-webkit-text-decoration-color: red;
-moz-text-decoration-color: red;
}
<span class="underlined-text">You're the greatest thing that has ever been or ever will be. You're special. You're so very special. It is a lot of fun. You don't want to kill all your dark areas they are very important. In your world you can create anything you desire.</span>
I had a similar issue with a tags and I figured it out.
The reason it's not animating is because you cannot transition from a text-decoration: none value.
In my case, what I did was set text-decoration-color to transparent and then, on :hover, set the text-decoration-color to the color value I wanted.
In your particular case, you would have to specifiy text-decoration: underline transparent since span tags have an initial text-decoration value of none. Then, on :hover, specify the text-decoration-color that you want.
FWIW, text-decoration and text-decoration-color are animatable properties, according to MDN.
References:
Animatable CSS Properties - MDN
The answer of #Jacob is pretty neat. But I accidentally found a solution no one have provided:
.un {
transition: .4s;
}
.un:hover {
box-shadow: 0 3px 0 #7f7f7f;
}
<span class="un"> Underlined Text - Or to be underlined </span>
Use box-shadow with no blur can achieve underline effects even more tricky and special.
This can make your page run slower if you use a lot of it.
You can use border-bottom instead, like so:
.un{
border-bottom: 1px solid transparent;
transition: all .5s ease-in;
}
.un:hover{
border-bottom: 1px solid black;
}
<span class="un"> Underlined Text - Or to be underlined </span>
Here is a workaround to add fade animation to the underline property:
.un{
text-decoration: underline;
text-decoration-color: #0000;
transition: .2s;
}
.un:hover{
text-decoration-color: #000;
}
Because text-decoration is an all-or-nothing property, you’ll probably want to try using a border-bottom instead. This is how I’ve done it previously:
.un {
border-bottom: 1px solid transparent;
transition: border-color 0.5s ease-in;
}
.un:hover {
border-color: black; /* use whatever color matches your text */
}
Text that is <span class="un">wrapped in the “un” class</span> has a border-bottom that appears as an underline that fades in.
Applying the transition to the border color change from transparent to your text color should give the appearance of a “fade in” from no underline to underline.
If you want an underline with increasing width like below, you can use background-image instead.
.un {
display: inline;
background-image: linear-gradient(#e876f5, #e876f5);
/* ↓ height of underline */
background-size: 0% 2px;
/* ↓ y position of underline. you can change as 50% to see it. */
background-position: 0% 100%;
background-repeat: no-repeat;
transition: background 0.3s linear;
}
.un:hover {
background-size: 100% 2px;
}
<span class="un">hover me</span>
I found this solution to work best, clean and simple. The transition works once you specify a color.
#ref: https://www.w3schools.com/cssref/css3_pr_text-decoration-line.asp
a {
color: #222;
-webkit-text-decoration: none transparent;
text-decoration: none transparent;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a:focus,
a:hover {
color: #222;
-webkit-text-decoration: underline #222;
text-decoration: underline #222;
}
This is how I moved the border up closer.
<style type="text/css">
a {
text-decoration: none;
border-bottom: solid 1px transparent;
font-weight: 600;
color: rgb(126,93,142);
-webkit-transition: all .5s;
transition: all .5s;
display: inline-block;
line-height: 1em;
}
a:hover {
text-decoration: none;
border-bottom: solid 1px;
color: #ce40ce;
display: inline-block;
line-height: 1em;
}</style>
La La La
So, I've barely done any design and am trying my hand at it, but I guess I'm thinking of things wrong when it comes to using class and id in my html and css since I'm thinking of it from a programming perspective. I was thinking of class as a sort of parent class and id representing a child, where they can inherit properties while at the same time having their own; however, though in some regard this seems to work, my transitions don't work as I expect them to when I hover over them.
I have an unordered list of buttons like this
<li><button type = "button" id = "first">Press Me</button></li>
and this css:
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
#first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
#second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
#third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#9bffcd;
}
For first only the color transition works, for second only the border transition works, and for third only the background and color transitions work. It seems that the transitions only work for the properties I haven't overridden. Is there anyway of preserving these transitions while keeping their individual properties? I might override these transitions for other buttons, but I was just curious how I would go about maintaining it for some. Thanks
While writing reusable code always prefer to class rather that id which will help you to override the properties very easily and you don't have to be explicit.
So, here is example as you need. I think it will work for you.
HTML
<button type="button" class="first">Press Me</button>
<button type="button" class="second">Press Me</button>
<button type="button" class="third">Press Me</button>
CSS
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
.first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
.second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
.third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#fff;
}
Link to Fiddle .
Have a nice code day.
Put the pseudo :hover selector to each button ID selector.
Try: #first:hover { ... } #second:hover { ... } #third:hover { ... }
I was hoping someone could help explain the strange behaviour I'm experiencing in Webkit browsers with unwanted delays in CSS transitions.
Here is a link to the page I'm working on: http://demo.daised.com/help-me
The desired outcome is for the menu bar to shrink as the user scrolls down the page. This animates perfectly in Firefox.
However, in Webkit browsers the transition for font-size of the nav items is delayed by 6(!) seconds.
Thanks for helping me understand this better.
The issue is caused by stacked transitions on elements that inherit the transition property.
a, span {
transition: 0.5s;
}
a {
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
The section of css a, span applies the transition to both elements.
The span inherits the color from the a, but does not apply the animation color until the a has finished its animation.
The best fix for the above example would be to remove the rule for a, span
and place transition: 0.5s; inside the rule for a:
a {
transition: 0.5s;
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.
Anyway what you've done in the header is dangerous, and may trigger weird behaviors :
header * {
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
}
You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).
Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.
This quick and nice answer sums up pretty much everything :
CSS3, WebKit Transition Order? How to queue to the transitions?
I ran into the same problem. My issue was that I was trying to transition properties that were originally being inherited from a parent. It turns out Webkit browsers (not Firefox) require each property that you're transitioning to actually be applied to that element. It seems they cannot transition properties that have been inherited.
For example, I was trying to do this:
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
color: #000;
}
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
}
.child.active {
border-color: #ff0000;
color: #ff0000;
}
Firefox managed to accomplish this but both Chrome and Safari required this:
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
// even though the color property is inherited,
// webkit requires it for transitions
color: #000;
}
Another reason for unwanted delays is with overflow: hidden;. If you have a dropdown toggle navbar for example: When it is toggled open, and the max-height is set to 1000px, whilst also having the CSS property overflow: hidden;, it will take longer to transition from its max-height to closed.
Came accross this issue as I had the same bug.
I had this in my CSS :
:root {
--duration-fast: 0.2s ease-in-out;
}
* {
transition: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
text-shadow var(--duration-fast);
}
Turned out it wasn't such a great idea... Here's how I fixed it:
:root {
--duration-fast: 0.2s ease-in-out;
--transition-fast: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
background var(--duration-fast),
text-shadow var(--duration-fast);
}
Now, when I want to have an element with transitions (without specifying all of them), I just do this:
.my-component {
transition: var(--transition-fast);
}