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

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

---

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>

---

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

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

<a href="http://example.com" class="foo bar hovertest">blah</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>

---

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>

---

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

Best of all, you can chain the event binds and do it all in one line of script if you want. Much easier than manually editing all of the HTML to turn them on or off. Then again, since you can do the same in CSS I don't know that it buys you anything (other than learning jQuery).

참고URL : https://stackoverflow.com/questions/131653/inline-style-to-act-as-hover-in-css