อะไรคือสิ่งที่ตรงข้ามกับ: hover (เมื่อปล่อยเมาส์)?

มีวิธีใดบ้างที่จะตรงกันข้ามกับการ:hover ใช้ CSS เพียงอย่างเดียว ? ในขณะที่ถ้า:hoverเป็นon Mouse Enterจะมี CSS เทียบเท่ากับon Mouse Leave?

ตัวอย่าง:

ฉันมีเมนู HTML ที่ใช้รายการ เมื่อฉันโฉบหนึ่งในรายการที่มีภาพเคลื่อนไหวสี CSS จากไป#999 blackฉันสามารถสร้างผลในทางตรงกันข้ามเมื่อเมาส์ใบพื้นที่รายการที่มีภาพเคลื่อนไหวจากblackไป#999?

jsFiddle

(โปรดทราบว่าฉันไม่ต้องการตอบเฉพาะตัวอย่างนี้ แต่เป็นปัญหา "ตรงข้าม:hover" ทั้งหมด)

ถ้าฉันเข้าใจถูกต้องคุณสามารถทำสิ่งเดียวกันได้โดยย้ายการเปลี่ยนไปที่ลิงก์แทนที่จะอยู่ในสถานะโฮเวอร์:

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/

คำจำกัดความของโฮเวอร์คือ:

ตัวเลือก: hover ใช้เพื่อเลือกองค์ประกอบเมื่อคุณวางเมาส์เหนือองค์ประกอบเหล่านั้น

ตามคำจำกัดความนั้นตรงข้ามกับโฮเวอร์คือจุดใด ๆ ที่เมาส์ไม่อยู่เหนือมัน มีคนที่ฉลาดกว่าฉันได้ทำบทความนี้ตั้งค่าการเปลี่ยนภาพที่แตกต่างกันในทั้งสองสถานะ - 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แทนภาพเคลื่อนไหว

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

การสาธิตสด

ไม่มีคุณสมบัติที่ชัดเจนสำหรับการปล่อยเมาส์ใน CSS

คุณสามารถใช้: วางเมาส์บนองค์ประกอบอื่น ๆ ทั้งหมดยกเว้นรายการที่เป็นปัญหาเพื่อให้ได้เอฟเฟกต์นี้ แต่ฉันไม่แน่ใจว่ามันจะใช้ได้จริงแค่ไหน

ฉันคิดว่าคุณต้องดูโซลูชัน JS / jQuery

คุณสามารถใช้การเปลี่ยน CSS3

ลิงค์ที่ดี:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understand-css3-transitions/

แม้ว่าคำตอบจะเพียงพอ แต่ฉันคิดว่าตัวอย่างW3Schoolsในประเด็นนี้ตรงไปตรงมามาก (ช่วยขจัดความสับสน (สำหรับฉัน) ได้ทันที)

ใช้:hoverตัวเลือกเพื่อเปลี่ยนรูปแบบของปุ่มเมื่อคุณเลื่อนเมาส์ไปที่ปุ่มนั้น

เคล็ดลับ:ใช้คุณสมบัติระยะเวลาการเปลี่ยนแปลงเพื่อกำหนดความเร็วของเอฟเฟกต์ "โฮเวอร์":

ตัวอย่าง

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

โดยสรุปสำหรับการเปลี่ยนที่คุณต้องการ "ป้อน" และ "ทางออก" ภาพเคลื่อนไหวจะเหมือนกันคุณจะต้องเปลี่ยนการจ้างงานในตัวเลือกหลักมากกว่าการเลือกเลื่อน.button .button:hoverสำหรับการเปลี่ยนที่คุณต้องการให้ภาพเคลื่อนไหว "enter" และ "exit" แตกต่างกันคุณจะต้องระบุตัวเลือกหลักและการเปลี่ยนตัวเลือกโฮเวอร์ที่แตกต่างกัน

ใส่ระยะเวลาของคุณในการเลือกแบบไม่วางเมาส์เหนือ:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

เพียงเพิ่มการเปลี่ยนแปลงให้กับองค์ประกอบที่คุณกำลังยุ่งอยู่ โปรดทราบว่าอาจมีผลกระทบบางอย่างเมื่อโหลดหน้าเว็บ เช่นเดียวกับถ้าคุณทำการเปลี่ยนแปลงรัศมีขอบคุณจะเห็นมันเมื่อโหลดดอม

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

คุณเข้าใจผิด:hover; มันบอกว่าเมาส์อยู่เหนือไอเท็มแทนที่จะป้อนเมาส์เข้าไปในรายการ

คุณสามารถเพิ่มแอนิเมชั่นให้กับตัวเลือกโดยไม่ต้อง:hoverใช้เอฟเฟกต์ที่คุณต้องการ

การเปลี่ยนเป็นตัวเลือกที่ดีกว่า: http://jsfiddle.net/Cvx96/

ตรงข้ามจะปรากฏขึ้นที่จะเป็น:hover:link

(แก้ไข: ไม่ได้ในทางเทคนิคตรงข้ามเพราะมี 4 ตัวเลือก:link, :visited, :hoverและ:activeห้าถ้าคุณรวม. :focus.)

ตัวอย่างเช่นเมื่อกำหนดกฎ.button:hover{ text-decoration:none }เพื่อลบขีดเส้นใต้บนปุ่มขีดเส้นใต้จะปรากฏขึ้นเมื่อคุณปิดปุ่มในบางเบราว์เซอร์ ฉันได้แก้ไขสิ่งนี้ด้วย.button:hover, .button:link{ text-decoration:none }

แน่นอนว่าสิ่งนี้ใช้ได้กับองค์ประกอบที่เป็นลิงก์จริงๆเท่านั้น (มีแอตทริบิวต์ href)

เพียงเพิ่มการเปลี่ยนแปลงและชื่อของแอนิเมชั่นในชั้นเรียนโดยไม่เป็นทางการในกรณีของคุณ ul li a เพียงแค่เพิ่มคุณสมบัติ "การเปลี่ยน" และนั่นคือทั้งหมดที่คุณต้องการ

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>