>source

링크 (활성, 링크 등)의 스타일을 설정했지만 완전히 다른 스타일의 버튼을 사용하여 다음과 같이 시도했습니다.

.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}
.r-button:hover { cursor: selector; color:ivory;}

<a class="r-button" onclick="document.getElementById('menu').style.display='block'">  Click button </a>

그러나 나는 : hover가 clases와 함께 작동하지 않는다는 것을 깨달았습니다. 왜 그런 겁니까? 다른 사람들도 같은 일을해야합니까?


  • 답변 # 1

    그렇습니다, 당신의 color: black !important;  호버와 그 selector 를 재정의  유효한 커서가 아닙니다. 마우스 포인터로 가리 키세요.

    .r-button:hover { cursor: pointer; }
    
    

  • 답변 # 2

    .r-button 에서 당신의 색깔에서 중요한 것을 제거해야합니다!  또는 .r-button:hover 에 추가  의 색

    .r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}
    .r-button:hover { cursor: selector; color:ivory !important;}
    
    
    <a class="r-button" onclick="document.getElementById('menu').style.display='block'">  Click button </a>
    
    

  • 답변 # 3

    귀하의 :hover  의사 요소가 !important 로 겹쳐 쓰여지고 있습니다. . !important 사용을 피하십시오  기본 클래스 내의 규칙.

    보너스 팁! cursor: pointer 를 제거하십시오  앵커 태그의 경우 빈 href="#" 가 있습니다.  더 나은 접근성을위한 속성입니다.

    .r-button {
      padding: 4px 52px;
      display: inline-block;
      text-align: center;
      font-size: 16px;
      text-decoration: none;
      color: black;
      border-radius: 12px;
      border: 1px inset #282c37;
    }
    .r-button:hover {
      background-color: #282c37;
      color: ivory;
    }
    
    
    <a class="r-button" href="#" onclick="document.getElementById('menu').style.display='block'">Click button</a>
    
    

  • 이전 regex - PHP에서 문자열을 일치/대체하는 방법은 무엇입니까?
  • 다음 excel - 하나의 매크로가 실행되고 다른 하나는 실행되지 않습니다