Jak napisać: najedź na wbudowany CSS?

1015

Mam przypadek, w którym muszę napisać wbudowany kod CSS i chcę zastosować styl aktywowania na kotwicy.

Jak korzystać a:hoverz wbudowanego CSS wewnątrz atrybutu stylu HTML?

Np. Nie można niezawodnie używać klas CSS w wiadomościach e-mail w formacie HTML.

html css inline-styles Amr Elgarhy
źródło
24
Osadzanie html w aplikacjach blogowych również często wymaga wyłącznego użycia stylów wbudowanych. Zwłaszcza jeśli osadzasz html za pośrednictwem klienta zewnętrznego i nie masz dostępu do motywów użytkownika.
opatrzność
8
Zaproponowano w tym celu standard CSS; nie mam pojęcia, jakie wsparcie przeglądarki może mieć (wskazówka: mogą używać niestandardowych tagów, takich jak -moz itp.): w3.org/TR/2002/WD-css-style-attr-20020515
Kato
1
możliwy duplikat Czy można utworzyć wbudowane pseudo style?
Synetech,
17
Och przestań. Czasami po prostu budujesz prototyp strony docelowej i nie chcesz rozwidlać arkuszy stylów ani tworzyć nowej gałęzi szablonów ani niczego innego, aby sprawdzić, czy zielony przycisk działa lepiej. Do licha.
ElBel
1
@FriendlyNeighborhoodIdiot Ta strona ma 13 lat, od tego czasu projekt został porzucony.
Tofandel

Odpowiedzi:

574

Krótka odpowiedź: nie możesz.

Długa odpowiedź: nie powinieneś.

Nadaj mu nazwę klasy lub identyfikator i użyj arkuszy stylów, aby zastosować styl.

:hoverjest pseudoselektorem, a dla CSS ma znaczenie tylko w arkuszu stylów. Nie ma odpowiednika w stylu wbudowanym (ponieważ nie definiuje kryteriów wyboru).

Odpowiedź na komentarze PO:

Zobacz Totally Pwn CSS z Javascriptem, aby uzyskać dobry skrypt na dynamiczne dodawanie reguł CSS. Zobacz także Zmień arkusz stylów, aby zapoznać się z niektórymi teoriami na ten temat.

Nie zapominaj również, że możesz dodać linki do zewnętrznych arkuszy stylów, jeśli jest to opcja. Na przykład,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Uwaga: powyższe zakłada, że ​​istnieje sekcja głowy .

Jonathan Fingland
źródło
4
możesz dodać klasy css w javascript
Jonathan Fingland
203
Istnieją inne okoliczności, w których wbudowany CSS jest jedyną opcją - takie jak wiadomości e-mail w formacie HTML (np. Gmail ignoruje CSS, chyba że jest wbudowany). Niestety z Javascriptem usuniętym również w większości klientów poczty e-mail nie znalazłem jeszcze sposobu na dodanie: efektów aktywowania.
Simon East
24
@Kato, chociaż jest to świetny link, i naprawdę chciałbym, żeby działało, niestety nie. Aby to potwierdzić, przetestowałem przy użyciu składni style="{color:green;} :hover { color: red; }"i firefox zdołał pokolorować łącze na zielono, ale zignorowałem najechanie kursorem. Chrome zignorował oba. Dalsze testy byłyby bezcelowe.
Jonathan Fingland,
9
Nie podałem tego jako działającego rozwiązania. Stwierdziłem, że nie jest „całkowicie” poprawne stwierdzenie, że nie ma wbudowanego odpowiednika i że pseudo selektory nie mają znaczenia poza arkuszami stylów. Jak to jest nieodpowiednie?
Kato,
5
Dlaczego długa odpowiedź brzmi: nie powinieneś ... ty ... nie powinieneś uogólniać. Próbowałem wysyłać wiadomości e-mail za pomocą html, ale zgadnij, co ... gmail usuwa wszystkie tagi stylu, wszystkie odwołania do stylów zewnętrznych i wszystkie skrypty. Więc ... czy jest jakiś sposób na styl najechanie na kolor linków w wiadomościach e-mail wysyłanych do Gmaila? Mam nadzieję, że tak ... nadzieja jest ostatnią, która umrze !!! =)
Miguel Angelo
433

Możesz uzyskać ten sam efekt, zmieniając swoje style za pomocą JavaScript w parametrach onMouseOveri onMouseOut, chociaż jest to wyjątkowo nieefektywne, jeśli musisz zmienić więcej niż jeden element:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>
Rozwiń fragment kodu

Nie pamiętam też na pewno, czy thisdziała w tym kontekście. Być może będziesz musiał to zmienić document.getElementById('idForLink').

Alex S.
źródło
12
to sprytne! Działa również dla efektu najechania kolorem tła<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
mxro
46
Muszę się śmiać z tego, że jest postrzegany jako „sprytny” :) Trudno wyobrazić sobie, że niektórzy ludzie nie byli w pobliżu, gdy był to wybitny / jedyny sposób na osiągnięcie tego efektu. Albo jeszcze gorzej, aby mieć „obraz” i wymieniać obraz, tylko po to, aby dać efekt „najechania”. Sprawia, że ​​czuję się stary! Ale wystarczy powiedzieć, że odpowiada na pytanie OP :)
Manachi
5
W tej sprawie muszę zgodzić się z Manachim. To jest jak retrospekcja do javascript z lat 90.; P
Eric Castro
9
Stare, nowe, starożytne lub naprzód. Odpowiedział na pytanie i pomógł mi. Dziękuję, @peter.
user2060451
4
Musiałem to zrobić dla e-maila i zadziałało. Dziękuję Ci! To faktycznie rozwiązuje pytanie, w przeciwieństwie do przyjętej odpowiedzi.
theUtherSide
53

Możesz to zrobić w pewnym momencie w przeszłości. Ale teraz (zgodnie z najnowszą wersją tego samego standardu, którym jest Rekomendacja dla kandydatów) nie możesz.

fuddin
źródło
3
wszystkie inne odpowiedzi mówiły, że nie jest to możliwe, ale twoje pokazują, że jest to możliwe, twoja odpowiedź jest inna, testuję ją.
Amr Elgarhy
2
Przepraszam, właśnie sprawdziłem datę artykułu. Ma 10 lat. Nie ma więc gwarancji, że to zadziała. Jeśli tak, proszę, powiedz mi również.
fuddin
2
Przetestowałem to: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> Ale to nie zadziałało
Amr Elgarhy
5
W przypadku, gdy ktoś
natrafi
9
Mówiąc dokładniej, możesz to zrobić w pewnym momencie w przeszłości. Ale teraz (zgodnie z najnowszą wersją tego samego standardu, którym jest Rekomendacja dla kandydatów) nie możesz .
Ilya Streltsyn
34

Bardzo się spóźniam, ale bardzo mi przykro, że nikt tego nie zasugerował. Jeśli rzeczywiście potrzebujesz kodu wbudowanego, możesz to zrobić. Potrzebowałem tego dla niektórych przycisków aktywowania, metoda jest następująca:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a
Rozwiń fragment kodu

W tym przypadku kod wbudowany: „kolor tła: czerwony;” to kolor przełączania po najechaniu myszą, wstaw tam potrzebny kolor, a wtedy to rozwiązanie zadziała. Zdaję sobie sprawę, że to może nie być idealne rozwiązanie pod względem kompatybilności, ale działa to, jeśli jest absolutnie potrzebne.

lukesrw
źródło
4
Dziękuję Ci. To świetna odpowiedź, myślę, że ta odpowiedź musi być rozwiązaniem.
Hovhannes Sargsyan
63
Nie, OP powiedział, że chcą go w wbudowanym CSS wewnątrz atrybutu stylu HTML .
jj_
3
Wiem, jj_- jednak ta metoda pozwala ci umieścić tylko kilka wierszy w CSS i używać go w kółko w wielu miejscach, wiele osób (w tym ja) uznało to za przydatną alternatywę.
lukesrw
2
taka powinna być faktyczna odpowiedź, z niewielką modyfikacją: nie ustawiaj żadnych kolorów w tym stylu, tylko zasadę dziedziczenia po rodzicu po najechaniu kursorem, a następnie ustaw dwa kolory w linii.
Hayko Koryun
4
To tylko „normalny” sposób na zrobienie tego, co wszyscy mówili, że jest właściwy. Nie jest to jednak sposób wbudowany, co było pierwotnym żądaniem OP.
wcndave
31

Nie możesz robić dokładnie tego, co opisujesz, ponieważ a:hoverjest częścią selektora, a nie reguł CSS. Arkusz stylów składa się z dwóch elementów:

selector {rules}

Style wbudowane mają tylko reguły; selektor domyślnie jest bieżącym elementem.

Selektor to ekspresyjny język, który opisuje zestaw kryteriów dopasowania elementów w dokumencie podobnym do XML.

Możesz jednak zbliżyć się, ponieważ stylezestaw może technicznie iść prawie wszędzie:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>
Rex M.
źródło
3
W rzeczywistości nie możesz: „HTML dopuszcza dowolną liczbę elementów STYLE w sekcji HEAD dokumentu”. ( w3.org/TR/html4/present/styles.html#edef-STYLE )
Éric Araujo
2
Działa na moim komputerze. Dzięki!
Josh Habdas
@ ÉricAraujo: Następnie zawiń całą treść pod <html> </html> tag
fuddin
30

za pomocą Javascript:

a) Dodanie stylu wbudowanego 

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) lub nieco trudniejsza metoda - dodanie „wskaźnika myszy”

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Uwaga: style wielosłówowe (tj. font-size) W Javascript są zapisywane razem :

element.style.fontSize="12px"

T.Todua
źródło
3
Ponieważ ta odpowiedź została zmniejszona, wydaje się, że jest całkowicie nieistotna w stosunku do pierwotnego pytania ...
Bill
1
Wow, to nieszablonowe myślenie ... Uwielbiam to!
theglossy1
14

Oto najlepszy przykład kodu:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>
Rozwiń fragment kodu

Sugestia moderatora: zachowaj separację obaw.

HTML 

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>
Rozwiń fragment kodu

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}
Rozwiń fragment kodu

użytkownik1476842
źródło
10

Wbudowane deklaracje pseudoklasy nie są obsługiwane w bieżącej iteracji CSS (choć z tego, co rozumiem, może pochodzić z przyszłej wersji).

Na razie najlepiej jest po prostu zdefiniować blok stylów bezpośrednio nad linkiem, który chcesz stylować:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
inkedmn
źródło
4
Ten pomysł na szczęście zostanie porzucony. (Patrz lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , w części „Opuszczone
projekty
3
Tam jest . brakuje w tej odpowiedzi.
Joel
9

Jak wskazano, nie można ustawiać dowolnych stylów wstawiania dla najechania kursorem, ale można zmienić styl kursora najechania kursorem w CSS, używając następujących elementów w odpowiednim znaczniku:

style="cursor: pointer;"
Rutherford
źródło
2
to powinna być najlepsza odpowiedź
Vladislav Guleaev,
6 
<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover jest pseudoklasą, dlatego nie można go stosować z atrybutem stylu. Jest częścią selektora.

Joel
źródło
2
@Derek w przypadku zainteresowania / dla każdego, kto czyta: „~ /” (ukośnik tyldowy) to odniesienie po stronie serwera do katalogu głównego aplikacji w aplikacjach internetowych asp.net. (Katalog główny aplikacji może być oczywiście podfolderem). Jego użycie tutaj nie byłoby poprawne, dlatego powód został zredagowany, odkąd zadałeś pytanie (podejrzewam).
Chris,
5

Możesz to zrobić. Ale nie w stylach wbudowanych. Możesz użyć onmouseoveri onmouseoutwydarzeń:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>
Rozwiń fragment kodu


źródło
4

Zgodnie z twoimi komentarzami i tak wysyłasz plik JavaScript. Wykonaj najazd w JavaScript. jQuery jest $.hover()metoda ułatwia, podobnie jak każdy inny otoki JavaScript. Prosty JavaScript też nie jest zbyt trudny.

Vineel Shah
źródło
Chociaż jest to obejście, ale wydaje mi się bardzo dobrą odpowiedzią i najlepszą odpowiedzią, jeśli naprawdę nie jest możliwe napisanie zawisu na
kursie
4

Nie ma na to sposobu. Masz do wyboru blokadę JavaScript lub CSS.

Być może istnieje biblioteka JavaScript, która przekonwertuje zastrzeżony atrybut stylu na blok stylu. Ale wtedy kod nie będzie zgodny ze standardami.

m_vitaly
źródło
2

Właśnie wymyśliłem inne rozwiązanie.

Mój problem: mam <a>tag wokół niektórych slajdów / głównej przeglądarki treści, a także <a>tagi w stopce. Chcę, aby poszły w to samo miejsce w IE, więc cały akapit zostanie podkreślony onHover, nawet jeśli nie są to linki: slajd jako całość jest linkiem. IE nie zna różnicy. W stopce mam też kilka faktycznych linków, które wymagają podkreślenia i zmiany koloru onHover. Pomyślałem, że będę musiał dopasować style do znaczników stopki, aby zmienić kolor, ale porady z góry sugerują, że jest to niemożliwe.

Rozwiązanie: podałem stopce dwie różne klasy, a mój problem został rozwiązany. Miałem możliwość onHoverzmiany koloru w jednej klasie, slajdy onHovernie miały zmiany koloru / podkreślenia, a jednocześnie mogłem mieć zewnętrzne HREFS w stopce i slajdach jednocześnie!

Liz
źródło
1

Zgadzam się z cieniem . Możesz użyć zdarzenia onmouseoveri onmouseoutdo zmiany CSS poprzez JavaScript.

I nie mów, że ludzie muszą mieć włączoną obsługę JavaScript. To tylko kwestia stylu, więc nie ma znaczenia, czy niektórzy użytkownicy nie mają JavaScript;) Chociaż większość Web 2.0 działa z JavaScript. Zobacz na przykład Facebook (dużo JavaScript) lub Myspace .

Jaysn
źródło
0

W grze jest już dość późno, ale kiedy użyjesz JavaScript w e-mailu HTML? Na przykład w firmie, w której obecnie pracuję (rymuje się z Abodee), używamy najniższego wspólnego mianownika dla większości e-mailowych kampanii marketingowych - a JavaScript po prostu nie jest używany. Zawsze. Chyba że masz na myśli jakieś wstępne przetwarzanie.

Jak wspomniano w powiązanym poście: „Lotus Notes, Mozilla Thunderbird, Outlook Express i Windows Live Mail wszystkie wydają się obsługiwać niektóre rodzaje skryptów JavaScript. Nic innego nie robi”.

Link do artykułu, z którego został pobrany: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

W jaki sposób najechanie kursorem przekłada się na urządzenia mobilne? Dlatego podoba mi się odpowiedź z góry:Long answer: you shouldn't.

Jeśli ktoś ma więcej informacji na ten temat, popraw mnie. Dziękuję Ci.

Shawn Spencer
źródło
0

Więc to nie jest dokładnie to, czego szukał użytkownik, ale znalazłem to pytanie, szukając odpowiedzi i wymyśliłem coś podobnego. Miałem wiele powtarzających się elementów, które wymagały nowego koloru / aktywowania na karcie w nich. Używam kierownicy, która jest kluczem do mojego rozwiązania, ale inne języki szablonów również mogą działać.

Zdefiniowałem niektóre kolory i przekazałem je do szablonu kierownicy dla każdego elementu. Na górze szablonu zdefiniowałem tag stylu i wstawiłem niestandardową klasę i kolor najechania kursorem.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Następnie użyłem stylu w szablonie:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Możesz nie potrzebować !important

ogar
źródło
0

możesz napisać kod różnego typu

najpierw mogę to napisać

HTML

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

możesz spróbować w inny sposób

HTML

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

możesz także spróbować najechać kursorem na jquery

skrypt Java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

HTML

<p>Hover the mouse pointer over this paragraph.</p>

w tym kodzie masz trzy funkcje w jquery, najpierw przygotowujesz funkcję, która jest podstawową funkcją jquery, a następnie masz funkcję hover w tej funkcji, gdy najedziesz wskaźnikiem na tekst, kolor zostanie zmieniony, a następnie następny kiedy zwolnisz wskaźnik do tekstu, będzie on miał inny kolor i jest to trzecia funkcja

Siraj Ahmed
źródło
Unikaj publikowania duplikatów odpowiedzi
Simas Joneliunas,
ok sir simas-joneliunas
Siraj Ahmed
Żadne z tych podejść nie rozwiązuje problemu wyrażonego w pytaniu. W ogóle nie można używać JS w formacie wiadomości e-mail w formacie HTML, a inne sugerowane podejście wykorzystuje klasy, które są wyraźnie wykluczone.
Quentin
-1

Musiałem unikać javascript, ale mogłem używać kodu po stronie serwera.

więc wygenerowałem identyfikator, utworzyłem blok stylu, wygenerowałem link z tym identyfikatorem. Tak, jest to poprawny kod HTML.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>
Rozwiń fragment kodu

BananaAcid
źródło
-2

Pseudoklasy można używać a:hovertylko w zewnętrznych arkuszach stylów. Dlatego zalecam użycie zewnętrznego arkusza stylów. Kod to:

a:hover {color:#FF00FF;}   /* Mouse-over link */
użytkownik 1466310
źródło
Na pewno nie potrzebujesz zewnętrznych arkuszy, wystarczy użyć styletagu.
Dmitri Zaitsev
-2

Możesz zrobić id, dodając klasę, ale nigdy inline.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 linie, ale możesz ponownie użyć tej klasy wszędzie.

pluskwa
źródło
-3

Mój problem polegał na tym, że buduję stronę internetową, która używa wielu ikon graficznych, które muszą zostać zamienione innym obrazem po najechaniu myszką (np. Niebieskie obrazy zmieniają kolor na czerwony po najechaniu myszą). Opracowałem dla tego następujące rozwiązanie:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Wprowadziłem pojemnik zawierający parę zdjęć. Pierwszy jest widoczny, a drugi ukryty (wyświetlanie: brak). Po najechaniu na pojemnik pierwszy zostaje ukryty (display: none), a drugi pojawia się ponownie (display: block).

Jochem Geussens
źródło