I'm fairly new to HTML and CSS. In my first website being created, I encountered a problem with CSS transitions.
What I want to happen, is when you mouse over, the text and background color transition, and for the same to happen when you mouse off. But instead, one of the CSS transitions seems to be overriding the other. I can't get them both to transition at the same time on mouse off. Am I just missing something, or is it more complicated than just a "transition: color 0.5s"? It's got to be possible somehow.
Check out what I mean here. here: (http://jsfiddle.net/SeanWhelan/oz0amfL7/)
Here is the code for the button:
.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color 0.5s; }
.btn:hover {
background: #87ff00;
cursor: pointer;
transition: background-color 0.5s;
color: #333; }
I apologise if there's a really simple way to do this, only started learning HTML and CSS a few days ago.
Give this a try:
.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color .5s, background-color .5s; }
.btn:hover {
background: #87ff00;
cursor: pointer;
color: #333; }
Transition statements do overwrite one another. You can either comma separate the various properties you want to transition or you can use the all keyword to target all properties.
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 try to implement a carousel with buttons to go back and forth. When I press the buttons on my pc there is no problem but once I press them on my phone the background-color turns gray.
image
Neither in my CSS nor in my HTML is a background-color which could interfere…
.prev-screen,
.next-screen {
align-self: stretch;
background: none;
border: 0;
margin-top: 40px;
color: rgba(#000, 0.25);
cursor: pointer;
font-size: 24px;
opacity: 1;
outline: none;
padding: 16px;
transform: scale(1);
z-index: 1000;
&:hover,
&:active {
color: #000;
transform-origin: center;
transform: scale(1.25);
}
&:disabled {
opacity: 0;
}
}
What could lead to that black background?
The CSS you provided doesn't describe exactly what you have written to change the background color. What code have you wrote to add the active class to the background? Either way, it might be because of the event listener you have set up to alter css properties... if it works on pc and not on mobile... this might help you out?, or at least guide you on your way... On click event for mobile?.
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 have this transition on hover, that makes a border at the bottom of the element that is being hovered over. All is well there, but when the mouse leaves the element, the border simply disappears, while I want it to "retract" back again. Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
How would I go about doing this, as simple as possible?
Thank you ;3
Transitions work in both directions automatically.
The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly.
This means that when you hover it, it becomes solid instantly and then spends time becoming 5px.
But when you unhover it, it becomes none instantly and you can't see the width animating.
Make the default (non-hovered) state explicit so that the border-width is the only thing that changes when you hover it.
Add:
border-bottom: 0px solid white;
to the rules for p.
I don't know if this could help, but in my case I just did like this:
Over:
.<nameOfClass>:hover{
transition: width 0.4s ease-in-out;
}
No over:
.<nameOfClass>:not(:hover){
transition: width 0.4s ease-in-out;
}
Add border-bottom: 0px solid white to p. Css wants to know where to transition back to! :D
for transition add an animate class to the element you want the transition
.animate
{
transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
}
Now when you add this class to your element it will make transition in both hover and hover out.
I have written some css for some elements, and it is causing some unexpected behaviour. I am using:
transition: 0.2s;
When refreshing the page, the element with this css property, unexpectedly start off in another area of the page, and move to their set positions (set in other parts of my css). The,
position: absolute
property is used to position the elements, what could be causing this unexpected behaviour?
Here is the CSS for the link:
.subLinks_links {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
text-align: left;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
font-size: 13px;
color: #999;
margin-bottom: -1px;
cursor: pointer;
text-transform: uppercase;
}
.subLinks_links > span {
margin-left: 30px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.subLinks_links:hover > span {
margin-left: 40px;
}
And the relevant HTML for the css:
<div id="subLinks">
<div class="subLinks_links_selected"><span>Link Text</span></div>
<div class="subLinks_links"><span>Link Text</span></div>
</div>
I have found that it was a positioning issue. I was using text-align and margin-left to position the elements. There was no dead positioning, which caused the unwanted behaviour.
I think I'm running into a similar issue. You're using the shorthand transition property which is actually translating to transition: all 0.2s ease 0.2s;. The all is important here. This means that the transition you are using for whatever reason (e.g. hover effects, etc.) is also applying itself to other css properties. In this case, the elements are being specifically targeted to change the layout, and since these properties are overriding the defaults there is a transition from the default to your css for every single property that changes.
I know you already found a fix for your case, but this is a possible solution for others who may stumble here later.