인라인 CSS로 호버 효과를 쓰고 싶습니까? CSS 변수를 사용하십시오.

최근에 나는 각 게시물이 추가 된 개성을 위해 독특한 색상을 자랑하는 블로그를 만들었습니다. 저자는 창조 후 CMS 에서이 색상을 선택합니다. 예술 방향의 미묘한 터치.

프론트 엔드 에이 색상을 표시하기 위해 처음에는 값을<article></article> 요소. 내 템플릿은 액체를 사용했지만 접근 방식은 다른 템플릿 언어에서 비슷합니다.

 {게시물의 게시물에 대한 % %}
<h1 id="post-title">{{post.title}}</h1>
  {{콘텐츠}}
{ % endfor %}

이것은 잘 작동했습니다. 그러나 나는 사용자 정의 색상이 호버에만 나타나기를 원했습니다. 호버 스타일은 스타일 속성에 직접 추가 할 수 없으므로 처음에는 이것을 시도했습니다.

 기사 {
  배경 : Lightgray! 중요;
}
기사 : 호버 {
  /* 작동하지 않습니다! */
  배경 : 상속;
}

!important 인라인 스타일을 무시하는 반면, 호버에서 이것을 반전시키는 방법은 없습니다.

내 솔루션은 스타일 속성을 사용하여 CMS에서 색상을 가져 오는 것이 포함되었지만 직접 적용하는 대신 CSS 변수로 저장했습니다.

<h1 id="post-title"> {{post.title}}</h1>
  {{콘텐츠}}

그런 다음이 변수는 표준 CSS에서 호버 스타일을 정의하는 데 사용됩니다.

 기사 {
  배경 : LightGray;
}
기사 : 호버 {
  /* 작동합니다! */
  배경 : var (-custom_color);
}

이제 색상이 CSS 변수이므로 사용을 확장 할 수 있습니다. 예를 들어, 사용자 정의 색상을 사용하여 게시물 내의 모든 링크를 스타일링 할 수 있습니다.

 기사 A {
  색상 : var (-custom_color);
}

변수의 범위는 다음으로 제한됩니다<article></article> 요소, 다른 곳에서 충돌을 방지합니다. 고유 한 색상의 여러 게시물이 같은 페이지에서 공존 할 수 있습니다.

CSS 변수 지원은 인터넷 익스플로러를 제외한 대부분의 최신 브라우저에서 우수합니다. 이 기술은 경량 CMS 아트 디렉션에 편리하며 CSS 변수의 힘을 보여줍니다.

위 내용은 인라인 CSS로 호버 효과를 쓰고 싶습니까? CSS 변수를 사용하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!