What is the difference between applying CSS transition property in hover rather than in its normal state?
SHORT ANSWER:
If you define your transition
property in element:hover
, it will only get applied in that state.
EXPLANATION:
Whichever CSS properties you define in element:hover
will only be applied when the element is in the hover state, whereas whichever CSS properties you define in your element
will be applied in both states.
Transition property declared in normal state:
See how the transition always runs when the element's state is changed. When you stop hovering the element it will still make the transition back to its normal state.
CODE SNIPPET:
#ID {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: royalblue;
transition: transform 1s;
}
#ID:hover {
transform: rotateX(60deg);
}
<div id="ID"></div>
Why does it matter which selector (“elem:hover” vs. “elem”) a CSS transition gets applied to?
But when I apply it to the
:hover
instead, it only works from default to hover, but not the other way, it just jumps back instantly. Why does this happen, what are the semantics of the transition property?
This has nothing to do with any “semantics of the transition property”.
Whatever styles you define for #myElement:hover
get only applied when the element is in the hover state, whereas whatever you define for #myElement
gets applied in both states, the “normal” state of the element, and the hover state.
So if you put transition
into the first rule with selector #myElement
, the element has that property in both states — whereas if you put it in the second one, it has it only in the hover state.
A simple example to show you that this has nothing to do with the transition
property itself:
#foo {
font-size: 20px;
}
#foo:hover {
background-color: red;
border: 1px solid;
}
#bar {
background-color: red;
font-size: 20px;
}
#bar:hover {
border: 1px solid;
}
Now, #foo
will have red background color only when hovered, whereas #bar
has red background color in both states … and it’s the same thing with transition
, or any other property.
css transition: choose different speed for hover out
Don't fret. try this (quick IN, slow OUT):
.main img {
width: 25%;
height: 100%;
transition: width 2s ease;
}
.main img:hover {
width: 50%;
transition: width .5s ease;
}
Your Fiddle as I can see it only has one transition. If you're only changing the width
, tell it to change the width
, which has full browser support, rather than calling transform
with all the attendant prefixes.
Why doesn't transition css property revert the animation when it's unhovered?
The problem is that the transition
property is defined in the:hover
pseudo-class instead of being declared in the normal state of the element.
You can read this post for further detail.
body {
background-color : #333333;
}
.corner {
background-color : rgb(207, 207, 207);
border-bottom-right-radius: 100%;
height : 50px;
left : 0px;
position : fixed;
top : 0px;
width : 50px;
transition : all .5s ease-in-out;
}
.corner:hover {
transform : rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}
#top-right {
left :auto;
right : 0px;
top : 0px;
transform: rotate(90deg);
}
#bottom-left {
bottom :0;
left :0px;
right : auto;
top : auto;
transform: rotate(-90deg);
}
#bottom-right {
bottom :0px;
left :auto;
right : 0px;
top : auto;
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rentats Royo</title>
<link rel="stylesheet" href="css/styles.css">
<style type="text/css">
</style>
</head>
<body>
<div class="corner"></div>
<div class="corner" id="top-right"></div>
<div class="corner" id="bottom-left"></div>
<div class="corner" id="bottom-right"></div>
</body>
</html>
Is it possible to prevent a CSS transition reversing off hover?
Yes, it is indeed. The trick is to make the width transition out take 0s
with a delay of 1s
.
html,
body {
margin: 0;
padding: 0;
}
a.btn--tertiary {
padding-left: 0;
padding-right: 0;
background-color: transparent;
color: #000;
border: 0;
position: relative;
padding-bottom: 5px;
text-transform: uppercase;
text-decoration: none;
font-size: 40px;
}
.btn--tertiary::before {
content: '';
height: 2px;
right: 0;
width: 100%;
background: #000;
position: absolute;
bottom: 0;
transition: width 0s;
z-index: 2;
border-left: 10px solid transparent;
}
.btn--tertiary::after {
content: '';
height: 2px;
left: 0;
right: auto;
width: 0%;
background: grey;
position: absolute;
bottom: 0;
opacity: 0;
transition: opacity .5s, width 0s .5s;
z-index: 3;
}
.btn--tertiary:hover:before,
.btn--tertiary:focus:before {
width: 0%;
border-left: 20px solid $white;
transition: width 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0s;
}
.btn--tertiary:hover::after,
.btn--tertiary:focus::after {
right: 0;
width: 100%;
opacity: 1;
transition: opacity 0s, width 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0.1s;
}
<a href="#" class="btn--tertiary">Button</a>
What is the opposite of :hover (on mouse leave)?
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;
}
Apply transitions on :hover not :active
a {
background-color: white;
transition: all 1s;
}
a:hover {
background-color: grey;
}
a:active {
background-color: black;
transition: none;
}
markup:
<menu type=list>
<li><a>home</a></li>
<li><a>work</a></li>
<li><a>contact</a></li>
<li><a>about</a></li>
</menu>
demo: http://jsfiddle.net/7nwLF/
Hover state is maintained during a transition even if the element has gone
Part 1 of your question:
The principle is straightforward: while the element is hovered, it
must go down. The problem is, when the mouse doesn't move, that the
:hover state is maintained even if the element is not physically below
the mouse anymore (due to the translation). The state seems to be
updated only after an mouse move.So here are my questions:
- Is this behaviour normal (compliant with the norms)?
Yes. This behaviour is normal. Although not specified verbatim in the standards, it is mentioned in detail here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
Take this fiddle as reference: http://jsfiddle.net/Blackhole/h7tb9/3/
The upper div
has mouse-events bound to it directly. The lower div
has mouse-event bound to its parent. Pick up the lower one. Move the mouse slowly at one edge and watch the console to see what happens.
- You touch the edge and
mouseover
andmouseenter
are fired in quick succession (hover). - As a result the inner
div
translates. - Do nothing. No event is fired and so nothing happens.
- Move the mouse inside the outer
div
.mousemove
fires and the innerdiv
is still translated. - Slowly move the mouse out.
mouseout
andmouseleave
are fired in quick succession and the innerdiv
translates back to its original position.
This is described here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-mouseevents under the section Mouse Event Order.
Step 3 above is important. Because you are doing nothing, no event is fired and hence nothing happens. If the inner div
were to bounce back to its original position in this step, then it would mean that an activation happened without any event!
This is in line with the definition of event as the document in this section: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event says:
An event is the representation of some occurrence (such as a mouse
click on the presentation of an element, the removal of child node
from an element, or any number of other possibilities) which is
associated with its event target. Each event is an instantiation of
one specific event type.
Now have a look at the document here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#event-flow, just before the section 3.2 starts, it says:
After an event completes all the phases of its propagation path, its
Event.currentTarget must be set to null and the Event.eventPhase must
be set to 0 (NONE). All other attributes of the Event (or interface
derived from Event) are unchanged (including the Event.target
attribute, which must continue to reference the event target).
The last line (in parentheses) is important. The event.target continues to reference the event target even after the event completes.
Now pick the upper div
in the fiddle for reference. On mouseenter
the div
itself is translated. It does not matter if it moves away from below the mouse pointer. The event.target is still referencing to it and if no other mouse event occurs, nothing happens and it remains translated. The moment you move your mouse (anywhere in or out), the activation occurs on the event.target (which is still this div
) and now the user-agent finds that the mouse pointer is no longer over the element and immediately mouseout
and mouseleave
events fire (after firing mousemove
of course) causing the div
to translate back.
Part 2 of your question:
2.What are the solutions to avoid this problem?
Edit : To give you a context, here is what I want to do concretely:
with JavaScript, I display a tooltip when the mouse is on an element
(and hide it when the mouse leaves it). But the same element can be
transform-ed when the user click on it. If the user simply clicks
without moving the mouse, the tooltip will remain displayed, which is
a real problem. How can I detect that the element is gone?
If you look at the implementation in the lower div
in this fiddle: http://jsfiddle.net/abhitalks/h7tb9/2/ ; as compared to the upper div, there is no flutter/jitter when mousing over. This is because rather than the div
itself, the events are being handled on the parent.
So, that could be one solution for your use case.
See this demo: http://jsfiddle.net/Blackhole/nR8t9/9/
This addresses your edit. Tooltip gets displayed on mouseover
. Tooltip gets hidden on mouseleave
. The same element can be transform-ed when you click
. If you simply click
without moving the mouse, the tooltip hides.
Here, if you click
, the element is being translated and then no further hover
action would happen. The tooltip itself is implemented using a :before
pseudo-element. This separates out the tooltip and the element which you want to change after click
. You still handle events on the element itself. No need for timeout as it is handled by the css itself. If you mouseout
, the tooltip will hide after a delay.
Hope that helps.
CSS transition to original state after mouseleave
You're going to have to use JavaScript and CSS Transitions:
var box = document.getElementById('box')
var timer
box.addEventListener('mouseenter', function () {
box.classList.add('up')
timer = setInterval(function () {
box.classList.toggle('up')
}, 1000)
})
box.addEventListener('mouseleave', function () {
clearInterval(timer)
box.classList.remove('up')
})
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50px;
height: 50px;
background-color: red;
transition: transform 1s ease;
}
div.up {
transform: translateY(-20px);
}
<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>
Related Topics
How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width
CSS Fading Top and Bottom "Borders"
How to Vertically Align a Progress Bar in Twitter Bootstrap
Improve CSS3 Text Rotation Quality
How to Style Disabled Options in a Form
How to Delete Border Spacing in Table
Bootstrap Change Carousel Height
Nginx Failing to Load CSS and Js Files (Mime Type Error)
Less Mixin with Optional Parameters
Is There a Way in Bootstrap to "Split" a Column on Small Screens
Do Ie Browsers (IE6, 7, 8) Support @Font-Face
Applying Webkit Transitions to Pseudo Elements
Why Does Space-Around Allow Flex Items to Overflow on the Left Side
Can You Use CSS Transitions on Svg Attributes? Like Y2 on a Line
How to Target CSS3 Columns Individually with Selectors