Styl wbudowany działający jak: hover w CSS

90

Wiem, że osadzanie stylów CSS bezpośrednio w tagach HTML, na które wpływają, podważa większość funkcji CSS, ale czasami jest to przydatne do celów debugowania, na przykład:

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

Jaka jest składnia osadzania reguły, takiej jak:

a:hover {text-decoration: underline;}

do atrybutu stylu znacznika A? To oczywiście nie to ...

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

... ponieważ miałoby to zastosowanie przez cały czas, a nie tylko podczas zawisu.

html css raldi
źródło
Teoretycznie, jeśli chcesz sprawić, by wskaźnik najechał coś dynamicznego, możesz użyć javascript, aby wstrzyknąć regułę dymienia do arkusza stylów, korzystając z listy istniejących arkuszy window.document.styleSheets.
GAgnew
Zobacz także stackoverflow.com/questions/5293280/…
rogerdpack

Odpowiedzi:

95

Obawiam się, że nie da się tego zrobić, selektorów pseudoklas nie da się ustawić w linii, będziesz musiał to zrobić na stronie lub w arkuszu stylów.

Należy wspomnieć, że technicznie ty powinien być w stanie to zrobić według specyfikacji CSS , ale większość przeglądarek nie obsługują

Edycja: 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 czy Chrome. Czy ktoś inny może testować w innych przeglądarkach?

Glenn Slaven
źródło
3
To wersja robocza CSS 3 o bardzo niskim priorytecie, która nie była aktualizowana od sześciu lat. Ze specyfikacji: „Niewłaściwe jest używanie szkiców roboczych W3C jako materiału referencyjnego lub cytowanie ich jako innych niż„ praca w toku ”. '
Jim,
1
To prawda, ale przeglądarki implementują pewne reguły CSS3, w tym kontekście powinno być prawdopodobnie niewłaściwym słowem
Glenn Slaven
Przeglądarki zazwyczaj implementują funkcje CSS, które są w dalszym rozwoju, np. Krycie pochodzi z CSS Color (ostatnie połączenie), a Media Queries to rekomendacja kandydata.
Jim,
Czy style = ": hover {}" nie byłoby odpowiednikiem "a {: hover {}}" w arkuszu stylów? To oczywiście błąd składniowy.
Kornel
32
Ta odpowiedź została opublikowana bardzo dawno temu, od tego czasu wiele się zmieniło i aktualna wersja odpowiedniej specyfikacji W3C - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - jasno mówi, że atrybut stylu może zawierać tylko zawartość bloku deklaracji CSS. Nie można więc teraz wstawiać pseudo elementów z styleatrybutem.
Ilya Streltsyn
24

Jeśli tylko debugujesz, możesz użyć javascript do zmodyfikowania css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>
Aleksi Yrttiaho
źródło
1
Szukałem rozwiązania z JSF i to pomogło mi to naprawić. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"
kdoteu
17

Proste rozwiązanie:

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

Lub

<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>
Roberto
źródło
16

Jeśli służy do debugowania, po prostu dodaj klasę css do najechania (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>
Rodrick Chapman
źródło
2
To prawdopodobnie najbliższy efekt, jaki osiągniesz
Glenn Slaven,
1

Przygotowałem szybkie rozwiązanie dla każdego, kto chce tworzyć wyskakujące okienka typu hover bez CSS, używając zachowań onmouseover i onmouseout.

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>
Josh Kernich
źródło
0

Jeśli ten <p>tag został utworzony z JavaScript, masz inną opcję: użyj JSS, aby programowo wstawić arkusze stylów do nagłówka dokumentu. Obsługuje '&:hover'. https://cssinjs.org/

michielbdejong
źródło
-2

Nie sądzę, by jQuery obsługuje również pseudo-selektory, ale zapewnia szybki sposób dodawania zdarzeń do jednej, wielu lub wszystkich podobnych kontrolek i tagów na jednej stronie.

A co najlepsze, możesz połączyć zdarzenia w łańcuch i zrobić to wszystko w jednej linii skryptu, jeśli chcesz. O wiele ł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, czy kupisz cokolwiek (poza nauką jQuery).

CMPalmer
źródło