How to show CSS transitions only on hover?
As you commented, if you want to prevent transition
while the background-color
is changed using button
, the way to do is, to use transition
on the :hover
block
#transition:hover {
background-color: #ADE1E1;
transition: .5s background-color;
-webkit-transition: .5s background-color;
-moz-transition: .5s background-color;
}
Demo 2 (background-color
won't change though, read ahead)
Note: Anyways you will need the below solution as well, else your
background-color
won't be changed
Demo 3 (If you care to :hover
even after changing the background-color
using jQuery)
That is because jQuery adds inline CSS which has highest preference/most specific and hence, :hover
background-color
won't be respected, you will have to use !important
in this case
Demo
#transition:hover {
background-color: #ADE1E1 !important;
}
Or else, it would be better, if you prefer adding and removing class
using jQuery, instead of using .css()
method, than you won't require !important
as well.
Transition only on hover-in
In this case add the transition to hover
.
Why?
Because when you hover you will add the transition and change the opacity so the transition property is set and thus it will work. When your mouse leave the element you suddenly remove the transition so it is no more specified and thus no more transition.
.hello { opacity: 0; font-size:35px;}
.hello:hover { opacity: 1; transition: all 1s ease 0s;}
<div class="hello"> Hello</div>
Can I apply a CSS transition on hover-out only?
Here's one way to achieve this (put a bogus
propertynone
for transition property in :hover
):
#inner2{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner2{
opacity:1;
transition:none;
}
http://jsfiddle.net/j716sbav/4/
Answer updated to incorporate @BoltClock's suggestion. Putting none
instead of a bogus property is definitely more elegant.
CSS Img resize transition time only on hover
You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.
/* when hovering the page */:hover .row .column img { transition: 0.6s ease;}
.row .column img { background: #000000; width: 100%; filter: brightness(0.8); height: calc(80vh - 10px); /* transition: 0.6s ease; [removed]*/}
.row .column:hover img { /* transition: 0.6s ease; [useless]*/ width: 110%; cursor: pointer; transform: translate(-5%, -5%); filter: brightness(0.5); height: calc(80vh - 10px);}
.column { float: left; position: relative; text-align: center; width: 50%; padding: 0px; overflow: hidden; height: calc(60vh - 10px);}
<div class="row"> <div class="column"> <a href="---.html"> <img src="https://picsum.photos/300/100/?random"> <div class="centered">1</div> </a> </div> <div class="column"> <a href="---.html"> <img src="https://picsum.photos/300/100/?random" /> <div class="centered">2</div> </a> </div></div>
Transition delay only on hover out
You can try
div::before {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease-in-out 1s;
}
div:hover::before {
opacity: 1;
transition: .0s ease-in-out 0s;
}
It will have transition delay only on hover-out
CSS ONLY Hover over button animate, hover out animate
It's possible without animations. Just use transform.
Example:
button{
transform: scale(1);
transition: transform ease 1s;
}
button:hover{
transform: scale(0.89);
}
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/
How do I have both :hover and transition-delay?
First of all, you need to put your transition setting on both button
and button:hover
, if you want different delay values on hover and mouseout.
Secondly, if you want to have a transition on a property such as width
, it works better if you specify its initial value on button
.
And finally, you can achieve the desired result by using the ::after
pseudo-element :
Your HTML
<button>click me</button>
Your CSS
button {
padding: 12px;
border-radius: 50%;
margin-bottom: 2em;
position: relative;
transition-delay: 0s;
background-color: #6272a4;
width: 100px;
}
button::after {
content:"test";
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
padding: 12px;
border-radius: 50%;
background-color: red;
}
button:hover::after {
display: none;
}
button:hover {
background-color: #000000;
width: 250px;
transition-delay: 2s;
color: red;
}
You can add transition time and ease if you want to.
Related Topics
How to Position Element in The Correct 3D Position with CSS Perspective
How to Add Shimmer Effect in CSS
CSS Flexbox Break Parent by Screen Width
How to Use a Material Theme Colors in My CSS in Angular2
D3Js Svg Open Lines Display a Fill Artifact, How to Fix It
CSS Not Loading in Firefox, Opera and Ie - Chrome and Safari Works Just Fine
Change Icon from Jquery UI to Fontawesome in Primefaces
How Md-Icons Are Rendered on Browser
†Appearing Instead of Quotation Marks
How to Mask a <Div>, or to Overlay Text with a Masked Image
I Need Help Making CSS for a Modern Vertical Navbar
Why Is My Bootstrap Column Centered Instead of Left-Aligned
Gradient Overlay on Image with Single Line of CSS
How Is The Screen Size Measured for Media Queries
Understanding Margin-Collpasing
Min-Height:100% Doesn't Work on My Container
Color for Styled Placeholder Text Is Muted in Firefox
Grid Layout: Create CSS So Elements Keep Position When Adjacent Element Gets Resized