इसके विपरीत क्या है: होवर (माउस अवकाश पर)?

Question

:hover केवल सीएसएस का उपयोग करने के विपरीत करने का कोई तरीका है ? जैसे: यदि :hoverहै on Mouse Enter, तो क्या कोई सीएसएस के बराबर है on Mouse Leave?

उदाहरण:

मेरे पास सूची आइटम का उपयोग करके एक HTML मेनू है। जब मैं किसी एक आइटम को हॉवर करता हूं, तो उसमें से सीएसएस रंग एनीमेशन होता #999है black। मैं विपरीत प्रभाव कैसे बना सकते हैं जब से एक एनीमेशन के साथ माउस पत्ते आइटम क्षेत्र, blackकरने के लिए #999?

jsFiddle

(ध्यान रखें कि मैं केवल इस उदाहरण का जवाब नहीं देना चाहता, लेकिन पूरे :hover"मुद्दे के विपरीत "।

Comments

वास्तव में आप क्या करने की कोशिश कर रहे हैं? शायद एक अलग विकल्प है?

— मोइन ज़मां

के विपरीत :hoverकाफी सरल है :not(:hover); हालाँकि, :hoverइसका पर्यायवाची नहीं है और onmouseenterन :not(:hover)ही जैसा है onmouseleave। CSS में DOM इवेंट्स की कोई अवधारणा नहीं है।

— BoltClock

@ कथुलु: :hoverका अर्थ है "एक ऐसा तत्व जिसके ऊपर एक माउस पॉइंटर है"। यह इंगित नहीं करता है कि क्या माउस पॉइंटर किसी अन्य तत्व से इस तत्व में परिवर्तित हो गया है। इसका अर्थ केवल यह है कि माउस पॉइंटर वर्तमान में तत्व पर है।

— BoltClock

@BoltClock: नहीं (: होवर) वास्तव में कुछ भी शुरू हो सकता है?

— मोइन ज़मां

@ मोइन ज़मां: हाँ। जब तक आपका माउस एक निश्चित तत्व से अधिक नहीं है, तब तक :not(:hover)लागू होगा। : यहाँ एक डेमो है jsfiddle.net/BoltClock/rghBX

— BoltClock

Answer 1

यदि मैं सही ढंग से समझता हूं कि आप अपने बदलावों को मंडराने वाली स्थिति के बजाय लिंक पर ले जा सकते हैं:

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/

होवर की परिभाषा है:

जब आप उन पर माउस रखते हैं, तो होवर चयनकर्ता तत्वों का चयन करने के लिए उपयोग किया जाता है।

उस परिभाषा के अनुसार होवर के विपरीत कोई भी बिंदु है जिस पर माउस उस पर नहीं है। किसी ने मुझसे कहीं अधिक होशियार इस लेख को किया है, दोनों राज्यों पर अलग-अलग संक्रमण की स्थापना की है - 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;
}

Comments

"(ध्यान रखें कि मैं केवल इस उदाहरण का जवाब नहीं देना चाहता, लेकिन संपूर्ण" विपरीत: हॉवर "समस्या।)"

— Cthulhu

@ कथुलु - मैंने अब अपना उत्तर संपादित कर दिया है। यह थोड़ा और अधिक मदद कर सकता है। मुझे लगा कि यह बहुत स्पष्ट जवाब था।

— स्पेसबियर्स

मुझे सही दिशा में इंगित करने के लिए +1। मुझे ब्राउज़रों के बीच एक एनीमेशन विसंगति आ रही थी। Chrome सब कुछ सुगमता से प्रस्तुत कर रहा था, लेकिन मेरे पास बदलावों में .1s अलग थे और मोज़िला और IE दोनों त्रुटि प्रदर्शित कर रहे थे। मैं अपनी संक्रमण संख्याओं का मिलान करके इसे ठीक करने में सक्षम था।

— टर्मो

ओह। :hoverआपके द्वारा उद्धृत की गई 'परिभाषा' W3Schools से है, जो किसी भी तरह से आधिकारिक स्रोत नहीं हैं। वास्तविक कल्पना w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes पर पाई जा सकती है , हालांकि यह सबसे सुलभ व्याख्या नहीं है।

— मार्क अमेरी

Answer 2

एनिमेशन के बजाय बस CSS बदलाव का उपयोग करें ।

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

A:hover {
    color: #000;
}

लाइव डेमो

Comments

जैसा मैंने कहा उदाहरण पर, मेरा मुद्दा एनीमेशन के साथ नहीं है, लेकिन "माउस पर" भाग के साथ है।

— कुलथु

संक्रमण माउस पर और माउस की छुट्टी दोनों पर काम करता है। यह सामान्य राज्य और :hoverराज्य के लिए शैलियों को निर्दिष्ट करने के लिए पर्याप्त है ।

— मराट तानलिन

Answer 3

नहीं, CSS में माउस लीव के लिए कोई स्पष्ट संपत्ति नहीं है।

आप उपयोग कर सकते हैं: इस प्रभाव को प्राप्त करने के लिए आइटम को छोड़कर अन्य सभी तत्वों पर होवर करें। लेकिन मुझे यकीन नहीं है कि यह कितना व्यावहारिक होगा।

मुझे लगता है कि आपको एक JS / jQuery समाधान देखना होगा।

Comments

इस मामले में जेएस की जरूरत नहीं है, और मैं अब इसे हतोत्साहित करूंगा, हालांकि प्रदर्शन का औचित्य है।

— एलेक्स चेम्बरलेन

उपरोक्त उदाहरण के लिए इसकी आवश्यकता नहीं है, लेकिन यह संपूर्ण "माउस लीव" समस्या के लिए सबसे अच्छा समाधान प्रतीत होता है।

— कुलथु

Answer 4

आप CSS3 के संक्रमण का उपयोग कर सकते हैं

कुछ अच्छे लिंक:

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

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

Answer 5

हालांकि यहां उत्तर पर्याप्त हैं, मुझे लगता है कि इस मुद्दे पर 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। उन बदलावों के लिए जहां आप "प्रवेश" और "बाहर निकलें" एनिमेशन को अलग-अलग चाहते हैं, आपको अलग-अलग मुख्य चयनकर्ता और होवर चयनकर्ता बदलावों की आवश्यकता होगी।

Answer 6

नॉन-हॉवर चयन में अपना अवधि समय डालें:

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

li a:hover {
  padding:19px;
}

Answer 7

जिस तत्व से आप खिलवाड़ कर रहे हैं, उसमें एक संक्रमण जोड़ें। ध्यान रखें कि पेज लोड होने पर कुछ प्रभाव हो सकते हैं। जैसे यदि आपने सीमा त्रिज्या में परिवर्तन किया है, तो आप इसे देखेंगे जब डोम लोड करेगा।

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

Answer 8

आपने गलत समझा है :hover; यह कहता है कि माउस एक आइटम पर है, बजाय माउस ने आइटम में प्रवेश किया है।

आप :hoverइच्छित प्रभाव को प्राप्त करने के बिना चयनकर्ता के लिए एनीमेशन जोड़ सकते हैं।

संक्रमण एक बेहतर विकल्प है: http://jsfiddle.net/Cvx96/

Comments

आपका फिडल अभीष्ट परिणाम नहीं देता है।

— गोविंद राय

Answer 9

के विपरीत :hoverप्रतीत होता है :link।

(संपादित करें: नहीं तकनीकी रूप से एक विपरीत क्योंकि वहाँ 4 चयनकर्ताओं हैं :link, :visited, :hoverऔर :activeपांच यदि आप शामिल हैं। :focus।)

उदाहरण के लिए जब .button:hover{ text-decoration:none }एक बटन पर अंडरलाइन को हटाने के लिए एक नियम को परिभाषित करते हैं , तो जब आप कुछ ब्राउज़रों में बटन को रोल करते हैं तो अंडरलाइन दिखाता है। मैंने इसके साथ तय किया है.button:hover, .button:link{ text-decoration:none }

यह निश्चित रूप से केवल उन तत्वों के लिए काम करता है जो वास्तव में लिंक हैं (href विशेषता है)

Comments

आपकी जानकारी गलत है। :linkबस के रूप में सरल रूप में लिंक का चयन करता है। यहाँ देखें की परिभाषा :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Alink

— Cthulhu

@ स्ट्राइव 55 आह, धन्यवाद, यह समझ में आता है। आपके द्वारा दिए गए लिंक में कहा गया है कि "उचित रूप से स्टाइल लिंक के लिए, आपको अन्य लोगों के सामने लिंक नियम रखना होगा, जैसा कि LVHA- क्रम द्वारा परिभाषित किया गया है: लिंक -: दौरा किया गया: - होवर -: सक्रिय।" अगर मैं इसे सही ढंग से समझता हूं, तो इसका मतलब है कि यदि कोई अन्य चयनकर्ता लागू नहीं होता है (: दौरा किया,: होवर, या: सक्रिय) तो: लिंक वह है जो लागू होता है। नहीं तकनीकी रूप से एक विपरीत है, क्योंकि वहाँ 4 कर रहे हैं, लेकिन यह अभी भी काम करता है

— scripter

Answer 10

बस एक संक्रमण जोड़ें और वर्ग के आइडियल पर एनीमेशन का नाम दर्ज करें, आपके मामले में, उल ली ए, बस एक "संक्रमण" संपत्ति जोड़ें और आपको बस इतना ही चाहिए

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>