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);
}
CODE SAMPLE HERE: http://codepen.io/colbisaurusrex/pen/YZdKyO?editors=1100
First problem:
I am trying to smoothly expand and compress a div (class: event) on hover. It expands smoothly, but it snaps back quickly when user is no longer hovering on div. I'd like to transition back at the same ease as it expands
Second problem:
Simultaneously, I'd like to reveal an inner, hidden child(class: hidden) when I hover over its parent(class: event). Ideally, I'd like to reveal it when the parent is fully expanded. And ease it back to hidden as the parent compresses. Right now, it is revealed immediately, before the parent div is fully expanded. I have tried to add a delay.
Basically, there is a beginning and ending transition that exact mirrors of each other. I'd like to do this with no Javascript
Bonus Question: If the entire transition was set off by a button click(say the Show Details button), do I have to use JS? Is there a way to do this with CSS only?
/* This is the CSS I am working with */
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out;
}
.event:hover {
height: 300px;
transition: height 500ms ease-in;
}
.event:hover .hidden {
display: block;
transition: display 300ms ease-in 1s;
}
.hidden {
font-size: 30px;
display: none;
}
/* End of css */
problem 1: transform should be transition
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 250px;
transform: height 300ms ease-out; // change this to transition
}
Problem 2: try using opacity instead of display:
.event:hover .hidden {
/* display: block; */
/* transition: display 500ms ease-in 1s; */
-webkit-transition: opacity 2s ease-in-out;
opacity: 1;
}
.hidden {
font-size: 30px;
/* display: none; */
opacity: 0;
}
demo: http://codepen.io/anon/pen/NpeWZz?editors=1100
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'm currently trying to do a sort of drop-down menu for the navbar of an app, in CSS, only.
My navbar, thanks to a checkbox, when checked, expands and when unchecked, hides itself with an animation, what is translated to the user as when he clicks anywhere on the navbar, it hides or expands itself. All the anchors in my navbar are linking to ids.
My problem is that, when I click on any link, the checkbox doesn't uncheck, so the navbar doesn't execute the "draw back" animation.
Here's the navbar what it looks like in html (jade-lang) :
header
input(type='checkbox')#btn
label(for='btn')#menu
nav
ul
li: a(href='#presentation') Accueil
And, to give just an idea of what looks like the css :
header input {
display: none;
}
#menu {
position: fixed;
left: 100%;
height: 100%;
width: 100%;
background-color: #333333;
font-weight: 500;
}
header input:checked + #menu {
-webkit-animation: showMenu 0.5s forwards;
animation: showMenu 0.5s forwards;
}
#-webkit-keyframes showMenu { from { left: 100%; } to { left: 0%; } }
#keyframes showMenu { from { left: 100%; } to { left: 0%; } }
header input + #menu {
-webkit-animation: hideMenu 0.5s forwards;
animation: hideMenu 0.5s forwards;
}
#-webkit-keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
#keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
Simple as that. But I don't get how to have the checkbox unchecking when clicking on any of the links of the navbar.
Thanks :).
EDIT I reworded my question.
You can not check/uncheck a checkbox using CSS, you'd need to use some JavaScript. As I understand the point of this excercise is to create a menu toggle type of button in pure CSS.
You can use :focus + * instead of :checked + *, so you'd need a focusable element, like <a>, to toggle the menu:
HTML:
Toggle menu
<nav id="menu">
Link<br>
Link 2
</nav>
** CSS **
#menu {
position: fixed;
left: 100%;
top:0;
width: 100%;
transition: left 300ms 300ms; /* note the additional transition delay */
}
a:focus + #menu {
left:0;
transition-delay:0;
}
Demo: http://jsfiddle.net/nt87koye/2/
This way the menu slides in when the link has focus, and slides out once the focus is lost (user clicks anywhere outside the link).
You could also use the :target pseudoclass and place <a href="#menu"> anywhere on the page, so the feature doesn't rely on specific markup, which is required with the adjacent sibling solution: http://jsfiddle.net/nt87koye/4/
Well, I'm completely at a loss. I'm designing a website with 4 social icons on the top right hand side. When one hovers over the icons, they increase from .7 to 1.0 opacity, and a line of text appears underneath. This is best demonstrated by an example (the images are broken, but no matter):
http://jsfiddle.net/7hZYj/
It's a rather simple effect which I've achieved through the use of CSS3 and lists:
#pageHeader .social ul ul {
position: absolute;
top: 30px;
right:0;
width:160px;
text-align: right;
opacity: 0.0;
-moz-transition:ease .6s; /* Firefox 4 */
-webkit-transition:ease .6s; /* Safari and Chrome */
-o-transition:ease .6s; /* Opera */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#pageHeader .social ul li:hover ul {
opacity: 1.0;
}
The problem is that if one hovers right below the images, the text shows up anyway. For instance, if you hover right below the image furthest to the right, the "join the e-list" line shows up. I only want it to reach 1.0 opacity when the image is hovered over...which is what I thought I specified in the CSS above.
What am I doing wrong?
opacity leaves the element there and since it's a child of the li, when you hover over the invisible element, you're hovering over the li.
#pageHeader .social ul ul {
position: absolute;
top: 30px;
right:0;
width:160px;
text-align: right;
opacity: 0.0;
-moz-transition:ease .6s; /* Firefox 4 */
-webkit-transition:ease .6s; /* Safari and Chrome */
-o-transition:ease .6s; /* Opera */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
left: -9999px;
}
#pageHeader .social ul li:hover ul {
opacity: 1.0;
left: auto;
}
Adding left:-9999px; seems to fix the issue. You can adjust the transition if you don't want it to automatically go back to the left when you are no longer hovering, as seen in this fiddle