What Is the Opposite of :Hover (On Mouse Leave)

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;
}

Rotate Item on hover and retain that position on mouse leave

Apply transition to :hover sudo element not to the main class.
What this does? This will apply transition on hover, and on mouseout this will bring back the element to the original state without any animation. Since on rotating the element by 360 degree makes the object in the actual state, the mouseout will not be visible visually.

.customer-item{
  width: 150px;
  height: 80px;
  border-radius: 5px;
  margin: 10px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  border: 3px solid rgb(240, 240, 240);
  -webkit-transition: none;
  transition: none;
}
.customer-item:hover{
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
  transition: transform 2s ease-in-out;
}

<div class="customer-item">
  customer-item
</div>

How to reverse hover state with jQuery?

You can easily achieve that by using the hover method of jQuery

As stated in the docs, this method can accept one to two arguments, the first one is called the handlerIn which can be translated as the hover state, mouse enter, etc and the handlerOut which corressponds to the 'mouse leave'

So to achieve what you want you can try something like this

$('DOM_NODE').hover(mouseEnter, mouseLeave);
function mouseEnter() {
     // do something when the mouse enters the dom node 
};
function mouseLeave() {
     // do something when the mouse leaves the dom node
};

MouseHover and MouseLeave Events controlling

The MouseEnter/Leave events are too unreliable to do this. Best thing to do is just use a Timer that checks if the mouse is still inside the window. Drop a Timer on the form and make the code look like this:

public partial class Form1 : Form {
    public Form1() {
        InitializeComponent();
        this.Opacity = 0.99;
        timer1.Interval = 200;
        timer1.Enabled = true;
        timer1.Tick += timer1_Tick;
    }
    protected override void OnLoad(EventArgs e) {
        base.OnLoad(e);
        timer1_Tick(this, e);
    }
    private void timer1_Tick(object sender, EventArgs e) {
        this.Opacity = this.Bounds.Contains(this.PointToClient(Cursor.Position)) ? 0.99 : 0.20;
    }
}

Btw: avoid increasing the Opacity to 1.0, that forces the native window to be recreated and that can have a lot of side-effects. Using 0.99 is best.

How to set hover transition when the mouse gets out of the element

I'm sure there is a better solution but you can set a transition on the #button, so if the button is not hovered anymore the #button is executed/drawn.

image not stable in mouseover and mouseleave

If I understand you right, try to use mouseenter/mouseleave instead, and use a hover event, which includes (mouseenter/mouseleave)

$(document).ready(function() {
  var $img = $('#id2');
 $('span').hover(function() {
   $img.show();
 },function() {
   $img.hide();
});

If you use mouseover, opposite to it is mouseout (not mouselave), mouseleave is opposite to the mouseenter event.

The main difference between these two is that mouseenter/mouseleave doesn't bubble, but mouseover/mouseout do.

Moreover when using mouseover/mouseout on element that has child elements, when mouse goes to a child element, the parent triggers mouseout. So it looks like the mouse has left the parent, but it just moved into a child.

Why CSS transition doesn't work when we move mouse away?

Because you set the transition property with :hover, your element only has the transition property when you hover. It's just as straightforward as this. You need to give the li element your transition property and only set the color on the selector that uses :hover.

li:hover{
    color:rgb(73, 207, 248);
}

li {
  transition: 1s;
}

<li></li>

What Is the Opposite of :Hover (On Mouse Leave)