[html] CSS에서 : hover 역할을하는 인라인 스타일

Program / 글쓴이

CSS 스타일이 영향을 미치는 HTML 태그에 직접 포함하면 CSS의 대부분의 목적이 무효화되지만 때로는 다음과 같이 디버깅 목적으로 유용합니다.

<p style="font-size: 24px">asdf</p>

다음과 같은 규칙을 포함하는 구문은 무엇입니까?

a:hover {text-decoration: underline;}

A 태그의 스타일 속성에? 분명히 이건 아니야 …

<a href="foo" style="text-decoration: underline">bar</a>

… 항상 호버링하는 동안이 아니라 항상 적용되기 때문입니다.

답변

할 수없는 일이 아닐까 걱정됩니다. 가상 클래스 선택기는 인라인으로 설정할 수 없습니다. 페이지 나 스타일 시트에서 설정해야합니다.

내가 언급해야 기술적으로 당신이 해야 그것을 할 수있을 CSS의 사양에 따라 ,하지만 대부분의 브라우저를 지원하지 않습니다

편집 : 나는 이것으로 간단한 테스트를했다 :

<a href="test.html" style="{color: blue; background: white}
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

그리고 IE7, IE8 베타 2, Firefox 또는 Chrome에서는 작동하지 않습니다. 다른 사람이 다른 브라우저에서 테스트 할 수 있습니까?

답변

디버깅 만하는 경우 javascript를 사용하여 CSS를 수정할 수 있습니다.

<a onmouseover="this.style.textDecoration='underline';"
    onmouseout="this.style.textDecoration='none';">bar</a>

답변

간단한 해결책 :

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

또는

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

답변

디버깅을위한 것이라면 호버링을위한 CSS 클래스를 추가하기 만하면됩니다 (요소는 둘 이상의 클래스를 가질 수 있기 때문입니다).

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

답변

onmouseover 및 onmouseout 동작을 사용하여 CSS없이 호버 팝업을 만들고자하는 사람을 위해 빠른 솔루션을 구성했습니다.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

답변

해당 <p>태그가 JavaScript에서 생성 된 경우 다른 옵션이 있습니다. JSS를 사용하여 프로그래밍 방식으로 문서 헤드에 스타일 시트를 삽입합니다. 그것은 지원하지 않습니다 '&:hover'. https://cssinjs.org/

답변

jQuery 가 의사 선택기를 지원 한다고 생각하지 않지만 단일 페이지에서 하나, 여러 또는 모든 유사한 컨트롤 및 태그에 이벤트를 추가하는 빠른 방법을 제공합니다.

무엇보다도 원하는 경우 이벤트 바인딩을 연결하고 한 줄의 스크립트에서 모두 수행 할 수 있습니다. 모든 HTML을 수동으로 편집하여 켜거나 끄는 것보다 훨씬 쉽습니다. 그런 다음 CSS에서 똑같이 할 수 있기 때문에 jQuery를 배우는 것 외에는 아무것도 구매하지 않습니다.