CSS：使元素可能只有不同：单击（：active）后悬停背景

Question

您好我尝试让您首先需要点击该元素，之后每当您将鼠标悬停在它上面时它应该变换背景。重要的是应该使用 No JavaScript或JQuery 。 这不是一个链接所以：已访问且 href 不是一个选项

*Pseudocode*


 *if* .lst-c:active *than* .lst-c:hover   {
       background: blue;
       border-radius: 20px 20px 0px 0px !important;
       }

Answer 1

您可以尝试使用Checkbox Hack

http://timpietrusky.com/advanced-checkbox-hack

＆＃13;

＆＃13;

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

div {
  background: green;
}

input[type=checkbox]:checked ~ div:hover {
  background: red;
}

＆＃13;

<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

复选框

＆＃13;

＆＃13;

/* Hide */
.is {  display: none  }

/* Is checked */
.is:checked + label .content:hover {  background: blue;  }

/* Not checked */
.content:hover {  background: red;  }

＆＃13;

<input type="checkbox" class="is" id="clicker">
<label for="clicker">
  <div class="content">Hello</div>
</label>

＆＃13;

＆＃13;

＆＃13;