CSS Pseudo Class for Leaving Hover

CSS pseudo class for leaving hover

Put the transitions on a.squares not a.squares:hover

a.squares {
    -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
a.squares:hover, a.squares:active {
    color: black;
    background-color: #E8E8E8;
    box-shadow: 0 0 12px black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

I went through this exact thing when I was just leaving about transitions :)

css hover pseudo class issue when leaving hover

If you would consider using background images you could do something like this:

<div class="marker" href="#">°</div>
<div class="mymap"></div>

CSS:

.mymap {
    position:absolute;
    width:4px;
    height:16px;
    padding:42px 148px;
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
    z-index:1;
}
.marker{
    position:absolute;
    top:22px;
    left:121px;
    padding:20px 27px 15px;
    background:none;
    z-index:2;
    color:red;
}
.mymap:hover {
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
}
.marker:hover + .mymap {
    background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
}

Note the use of the adjacent selector to do the final zoom.

jsfiddle

in Sass it would be pretty simple:

.mymap {
    position:absolute;
    width:4px;
    height:16px;
    padding:42px 148px;
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
    z-index:1;
    &:hover {
        background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
    }
}
.marker {
    position:absolute;
    top:22px;
    left:121px;
    padding:20px 27px 15px;
    background:none;
    z-index:2;
    color:red;
    + .mymap {
    background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
    }
}

If you would use sprites instead of separate images, then you would also have all of the map images loaded with the first one already.

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

Css pseudo classes are changing select value when mouse leave on Firefox

What happen usually

In a normal situation (without all these CSS properties) with an opened <select>, when the mouse go over <select> items, they are considered in succession as selected (a blue background is showed).

If you click on the item, it keep this selected state. <select> is closed, JS events are triggered, and the <select> showed value is this selected item.
If you open again the <select>, the item is still in blue.

If you click away while the <select> is opened, the selected item is reset to the previous one.

What happened here

The bug come from the crossing of two Firefox behaviors :

• When a div::after content change, the div (and his children) rendering is recalculated.
• A <select> always consider his selected item (the one with a blue background) as its current value.

Step by step :

1. You click on the <select>, it open the menu.
2. The mouse go over <select> items, which are considered in succession as selected.
3. The mouse go out of the <div>, so :
   
   
   • ::after content is changed
   • <div> content is recalculated
   • <select> is reset, so showed in its closed state
   • and... the last element the mouse was over on is still selected

So the "visually closed" <select> show this last selected item as selected. No JS events are triggered.
But It's not only a visual bug. On Firefox, the <select> value (elem.value) is changed when the mouse go over its items.

See fiddle

How to fix it

It's a Firefox <select> behaviour, you can't do anything against that, except create your own select in Js.

To prevent the <select> to close when the mouse leave, remove :

div[data-used="true"]::after:hover{
    content: "✖";
}

Is there an opposite CSS pseudo-class to :hover?

Yes, use :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

.child {
  display: inline-block;
  background: #000;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.child:not(:hover) {
  opacity: 0.3;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Is it possible to handle mouseout on ::after pseudo-class in CSS?

Don't use animation but transition. An idea using background properties

.header-section {
  width: calc(100% / 4);
  padding: 10px 15px;
  user-select: none;
  font-family: 'Nourd', sans;
  font-size: 1.2em;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  position: relative;
}

.header-section::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 25%;
  right: 25%;
  height: 4px;
  border-radius: 6px;
  background-image: linear-gradient(135deg, rgb(225, 60, 60), rgb(235, 126, 181));
  background-size: 0% 100%;
  background-position:right;
  background-repeat: no-repeat;
  transition:background-size 0.5s, background-position 0s 0s;
}

.header-section:hover::after {
  background-size: 100% 100%;
  background-position:left;
}

<div class="header-section header-section-selected">importer</div>
<div class="header-section">mes fichiers</div>

Add transition to hover after pseudo

It's hard to reproduce from your code but there's a few main problems:

• Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.

• It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.

• You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.

And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:

.container {
  position: relative;
  padding:10px;
  font-family:'Arial';
  border:1px solid black;
}

.container .tooltip {
  opacity: 0;
  transition: opacity 0.4s ease-out;
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  padding:10px;
  font-size: 13px;
}

.container .primary:hover .tooltip {
  opacity: 1;

}

<div class="container">
  <div class="primary">div
  <div class="tooltip">"Go through a list of friends to remove"</div>
  </div>
</div>

How to fade in and out a CSS “:after” pseudo element on hover?

i have add same css please check your help full

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );@import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
.adminDemoVideo {  position: relative;  display: inline-block;  transition:all 0.3s ease;  }.adminDemoVideo:after {    content: '\f04b';    z-index: 5;    position: absolute;    left: 50%;    top: 50%;    transform: translate( -50%, -50% );    padding: 3px 15px 3px 25px;    color: white;    font-family: 'FontAwesome';    font-size: 50px !important;    background-color: rgba(23, 35, 34, 0.75);    border-radius: 5px 5px 5px 5px;    -webkit-transition: all 1s;    transition: all 1s;    opacity:0;}

.adminDemoVideo:hover:after {       opacity:1;}

<div class="adminDemocontainer"><a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">  <img src="http://placehold.it/1200x800/fc0" class="img-responsive"></a></div>

---

Related Topics