क्या यह संभव है कि छद्म वर्ग को बाहर किया जाए जिसके पास अन्य छद्म वर्ग के समान संपत्ति हो संक्रमित होने से? कृपया अपने संदर्भ के लिए निम्नलिखित उदाहरण कोड देखें:

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}
<button class="transition">Submit</button>

क्या होगा यदि मैं संक्रमण को :hover छद्म वर्ग पर लागू करना चाहता हूं लेकिन :focus छद्म वर्ग पर नहीं?

JSFiddle पर डेमो

0
Srishti 19 जिंदा 2021, 11:12

2 जवाब

सबसे बढ़िया उत्तर

आप transition: none; को :focus पर जोड़ सकते हैं

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
  transition: none;
}
<button class="transition">Submit</button>

आप transition: all 1s ease-in 500ms; को :hover अनुभाग में भी स्थानांतरित कर सकते हैं लेकिन आपको :focus पर transition: none; की आवश्यकता होगी क्योंकि :focus केवल तभी होता है जब आप :hover

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:hover {
  background-color: black;
  transition: all 1s ease-in 500ms;
}

button:focus {
  background-color: green;
  transition: none;
}
<button class="transition">Submit</button>
1
caramba 19 जिंदा 2021, 11:15

ट्रांज़िशन प्रॉपर्टी को button:not(:focus) पर लागू करने का प्रयास करें:

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:not(:focus) {
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}
<button class="transition">Submit</button>
1
sbgib 19 जिंदा 2021, 11:16