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);
}
what is wrong with this code? I am unable to execute upon click of active tabs.
.sample-4.sample li:nth-child(1) a.nav-link.active ~ li:last-child:after{transform:translateX(-290%)}
.sample-4.sample li:nth-child(2) a.nav-link.active ~ li:last-child:after{transform:translateX(-104%)}
.sample-4.sample li:nth-child(3) a.nav-link.active ~ li:last-child:after{transform:translateX(-90%)}
.sample-4.sample li:nth-child(4) a.nav-link.active ~ li:last-child:after{transform:translateX(0%)}
.sample .nav.nav-tabs li:last-
child:after {
content:'';width:100%;height:3px;background-
color:green;display:block;
bottom:-4px;
transform:translateX(0);
transition:all .5s linear
}
If I am using like below Code is working fine.
.sample-4.sample li:nth-child(1) ~ li:last-child:after{transform:translateX(-290%)}
.sample-4.sample li:nth-child(2) ~ li:last-child:after{transform:translateX(-104%)}
.sample-4.sample li:nth-child(3) ~ li:last-child:after{transform:translateX(-90%)}
.sample-4.sample li:nth-child(4) ~ li:last-child:after{transform:translateX(0%)}
You are trying to use the pseudo-class after without content. You must have content in order to render before or after to DOM.
Example:
li:last-child:after{
content: "";
width: 100px;
height: 120px;
display: block;
transform:translateX(-290%);
}
Also, don't forget to change display to block or inline-block. This way your dimensions (width, height, margin and padding) will take effect.
I'm creating a wordpress site with a child theme of twenty fourteen.
I wanted to fade in transitions and found this:
ease in transition of submenu
The answer works but:
For level 2 menus (a submenu under submenu), the items fly in from left to right, rather than just 'appearing out of thin air' - how do I fix this?
The transition has affected the mobile display version - how do i stop this?
Thanks for your time and help.
I figured it out myself as the sub-menu was at -999em in parent theme:
/* Smooth transition of menus */
.primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul {
opacity:1;
}
.primary-navigation ul ul{
transition: 1s;
opacity:0;
}
/* Submenus to slide out of submenus */
.primary-navigation ul ul ul{
top: 0px;
left: 150px;
}
/* Mobile nav menu to always show and not require hover */
#media (max-width: 782px) {
.primary-navigation ul ul{
transition: 1s;
opacity:1;
}
}
I want to make the dropdown menu fade in/out slightly. I tried to add opacity and hover, but I could not figure it out.
nav ul li:hover > .midbox {
opacity:1;
transition: all 0.5s ease;
}
I than set opacity:0 on .midbox with the same transition applied.
Below is a fiddle with an example.
https://jsfiddle.net/skf5v0Lw/
Am I supposed to use the other element hover state to affect the state of the dropdown?
CSS transition does not work on display property. Use visibility instead. Also it should be set on the dropdown UL rather than the inner element.
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
/* display: none; */
position: absolute;
width: 800px;
top: 60px;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
/* display:block; */
opacity: 1;
visibility: visible;
}
https://jsfiddle.net/skf5v0Lw/5/
Not sure if this helps, but you could check out dropotron, it allows for a bunch of settings like fade in dropdown, hover delay, and that sort of thing.
https://github.com/n33/jquery.dropotron
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 8 years ago.
I can't get transition to work on a website i'm working on. The nav menu hides and shows correctly, but it just appears instantly without tranistion. The CSS is this:
.nav ul li ul li {
display:none;
visibility:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
display:block;
visibility:visible;
}
and the HTML is
<div class="nav">
<ul>
<li>test</li>
<li>test
<ul class="sub-menu">
<li>test</li>
</ul>
</li>
</ul>
</div>
I have tested it in chrome, ffx, ie.
I actually got most of this code off another answer on this site, so i'm not sure what my problem is here.
I should have mentioned, I have tried opacity from other answers, but in a drop down menu, it won't work as the menu stays there.
The transition from display: none to display: block does not behave like you expect.
Work with opacity instead.
jsFiddle Demo
Try This CSS this will work fine
.nav ul li > ul {
opacity:0;
overflow:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
height:auto;
opacity:1;
}
Demo Here
display property does not work with transitions.
what itay suggested is valid,and you can play with other properties as well (position ?)
to make the desired effect.