styl Inline działać jako: hover w CSS

Question

wiem, że osadzanie stylów CSS bezpośrednio w znacznikach HTML one wpływają pokonuje wiele celów CSS, ale czasami jest to przydatne dla celów debugowania, jak w:

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

Jaka jest składnia do osadzania regułę jak:

a:hover {text-decoration: underline;} 

do atrybutu stylu charakterystycznym dla tagu? To oczywiście nie jest ...

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

... ponieważ będzie to miało zastosowanie przez cały czas, w przeciwieństwie do tylko podczas zawisu.

Answer 1

Obawiam się, że nie da się tego zrobić, selektory pseudoklasowe nie mogą być ustawione w linii, musisz to zrobić na stronie lub arkuszu stylów.

należy wspomnieć, że technicznie ty powinien być w stanie to zrobić according to the CSS spec, ale większość przeglądarek nie obsługują to

Edit: Właśnie zrobiłem szybki test z tym:

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

I nie działa w IE7, IE8 beta 2, Firefox ani Chrome. Czy ktokolwiek może testować w innych przeglądarkach?

Answer 2

Jeśli jesteś tylko do debugowania, można użyć javascript, aby modyfikować CSS:

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

Answer 3

Jeśli to do debugowania, wystarczy dodać klasę css do unoszące (ponieważ elementy mogą mieć więcej niż jedną klasę):

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

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

Answer 4

nie sądzę jQuery obsługuje pseudo-selektorów obaj, ale daje szybki sposób dodawać wydarzenia do jednego, wielu lub wszystkich podobnych kontroli i tagów na jednej stronie.

Co najlepsze, możesz powiązać wiązanie zdarzeń i zrobić to wszystko w jednym wierszu skryptu, jeśli chcesz. Znacznie łatwiejsze niż ręczne edytowanie całego kodu HTML, aby je włączyć lub wyłączyć. Z drugiej strony, ponieważ możesz zrobić to samo w CSS, nie wiem, że kupuje ci wszystko (poza nauką jQuery).

Answer 5

Proste rozwiązanie:

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

Albo

<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> 

Answer 6

ułożyła szybkie rozwiązanie dla wszystkich, którzy chcą tworzyć wyskakujące okna kursorem myszy bez CSS używając onmouseover i onmouseout zachowań.

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>