How can I use CSS to transition on mouse away?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How can I use CSS to transition on mouse away?

Post by simonmlewis »

This makes a DIV slide in on hover.
But is there a CSS I can add, so that when the mouse leaves the DIV, it slides back rather than just 'jumps' back?

Code: Select all

<style>
.home-phone
{
font-family: arial;
-webkit-border-radius: 17px 0px 0px 17px;
-moz-border-radius: 17px 0px 0px 17px;
border-radius: 17px 0px 0px 17px;
position: absolute;
right: -110px;
padding: 10px;
top: 100px;
width: 140px;
background-color: #333333;
color: #ffffff;
font-size: 1.5em;
text-align: center;
-webkit-box-shadow: 0px 13px 5px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 13px 5px -14px rgba(0,0,0,0.75);
box-shadow: 0px 13px 5px -14px rgba(0,0,0,0.75);
}

.home-phone a
{
color: #ffffff;
}

.home-phone i
{
margin-right: 10px;
}

.home-phone:hover
{
right: 0px;
transition: right 0.5s ease-in;
}
</style>
<div class='home-phone'><a href='#'><i class="fa fa-phone" aria-hidden="true" style='color: #ffffff'></i> &nbsp;Contact</a></div>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How can I use CSS to transition on mouse away?

Post by requinix »

Stick the opposite transition in the non-hover definition.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I use CSS to transition on mouse away?

Post by simonmlewis »

Oh yes. Just set transtion: ease-out 0.2s, and it's brilliant.
I assume I have to set a overflow-x: hidden on the HTML element, as at the moment it's causing a permanent scrolling back along the bottom.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply