मेरे पास एक क्लिक करने योग्य div है जिसे मैंने बनाया है जो एक बटन की तरह काम करता है। मैं इसकी :hover स्थिति बनाने में कामयाब रहा, लेकिन मुझे :active स्थिति काम करने के लिए नहीं मिली। क्लिक करने पर मुझे इसकी :hover शैली बनाए रखने के लिए मूल रूप से बटन की आवश्यकता होती है। मैं केवल सीएसएस का उपयोग करना चाहता हूं। मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूँ।

.delete-ad-reason-box {
  display: inline-block;
  width: 100%;
  border: 2px solid red;
  border-radius: 0.25rem;
  color: red;
  font-size: 1em;
  margin: 30px 0;
  padding: 20px 15px;
  line-height: 20px;
}

.delete-ad-reason-box i {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: red;
}


/* Here's the ":active" */

.delete-ad-reason-box:hover,
.delete-ad-reason-box:active {
  border: 2px solid red;
  background: red;
  color: white;
}

.delete-ad-reason-box:hover>i,
.delete-ad-reason-box:active>i {
  color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<a href="#" class="col-lg-4 col-md-4 col-sm-10 col-xs-10 col-10">
  <div class="mx-auto delete-ad-reason-box" id="#">
    <i class="fas fa-frown d-block"></i> Click Me
  </div>
</a>
css
0
Paula 30 नवम्बर 2020, 15:59

2 जवाब

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

मेरा सुझाव है कि आप इसके लिए केवल 1 एंकर टैग तत्व का उपयोग करें। :active :focus छद्म तत्व केवल a टैग पर काम करता है। तो इस पर अपनी एचटीएमएल संरचना को सरल बनाएं।

.click-me {display:block;color:red;border:1px solid red;width:100%;padding:20px 10px;text-decoration:none;font-weight:bold;}
.click-me:hover,.click-me:active,.click-me:focus {border:1px solid transparent;color:#fff;background:red;}
<a href="#" class="click-me">Click Me</a>

यह अधिक सरल है और आपको a टैग के अंदर div तत्व जोड़ने की आवश्यकता नहीं है।

0
laurence keith albano 30 नवम्बर 2020, 16:36

आप एक div तत्व के लिए : active का उपयोग नहीं कर सकते। आप इसे केवल जावास्क्रिप्ट के माध्यम से प्राप्त करने में सक्षम हो सकते हैं

1
Hema Ramasamy 30 नवम्बर 2020, 16:30