[hover-color]:hover {
  color: var(--hover-color);
}

<a
  style="--hover-color: green"
  hover-color>
    Library
</a>

Antwoord 13

Volgens uw opmerkingen verzendt u toch een JavaScript-bestand. Doe de rollover in JavaScript. jQuery‘s $.hover()-methode maakt het gemakkelijk, net als elke andere JavaScript-wrapper. Het is ook niet zo moeilijk in gewoon JavaScript.

Antwoord 14

Er is geen manier om dit te doen. Uw opties zijn om een JavaScript- of een CSS-blok te gebruiken.

Misschien is er een JavaScript-bibliotheek die een eigen stijlkenmerk omzet in een stijlblok. Maar dan voldoet de code niet aan de norm.

Antwoord 15

u kunt een code in verschillende typen schrijven

eerst kan ik dit schrijven

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

je kunt het op een andere manier proberen

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

je kunt ook hoveren in jQuery

java-script

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

in deze code heb je een drie-functie in jQuery, eerst maak je een functie klaar die de basis is van de functie van jQuery en ten tweede heb je een zweeffunctie in deze functie wanneer je een aanwijzer naar de tekst beweegt, wordt de kleur gewijzigd en dan zal de volgende, wanneer u de aanwijzer naar de tekst loslaat, de andere kleur zijn en dit is de derde functie

Antwoord 16

Ik heb net een andere oplossing bedacht.

Mijn probleem: ik heb een <a>-tag rond sommige dia’s/hoofdcontentviewer en <a>-tags in de voettekst. Ik wil dat ze naar dezelfde plaats in IE gaan, dus de hele alinea zou onHoveronderstreept zijn, ook al zijn het geen links: de dia als geheel is een link. IE kent het verschil niet. Ik heb ook enkele echte links in mijn voettekst die de onderstreping en kleurverandering onHovernodig hebben. Ik dacht dat ik stijlen inline zou moeten zetten met de footer-tags om de kleur te veranderen, maar advies van hierboven suggereert dat dit onmogelijk is.

Oplossing: ik heb de footer-links twee verschillende klassen gegeven en mijn probleem was opgelost. Ik was in staat om de onHoverkleurverandering in één klas te hebben, de dia’s onHoverhebben geen kleurverandering/onderstreping, en nog steeds in staat om de externe HREFS in de voettekst en de dia’s tegelijk!

Antwoord 17

Ik ben het eens met schaduw. U kunt de gebeurtenissen onmouseoveren onmouseoutgebruiken om de CSSvia JavaScript.

En zeg niet dat mensen JavaScript moeten hebben geactiveerd. Het is alleen een stijlkwestie, dus het maakt niet uit of er bezoekers zijn zonder JavaScript 😉
Hoewel de meeste Web 2.0met JavaScript werken. Zie bijvoorbeeld Facebook(veel JavaScript) of Myspace.

Antwoord 18

Dit is vrij laat in het spel, maar wanneer zou je JavaScript gebruiken in een HTML-e-mail? Bij het bedrijf waar ik momenteel werk (rijmt op Abodee), gebruiken we bijvoorbeeld de kleinste gemene deler voor de meeste e-mailmarketingcampagnes – en JavaScript wordt gewoon niet gebruikt. Ooit. Tenzij je verwijst naar een soort voorbewerking.

Zoals vermeld in een gerelateerd bericht: “Lotus Notes, Mozilla Thunderbird, Outlook Express en Windows Live Mail lijken allemaal een soort JavaScript-uitvoering te ondersteunen. Niets anders doet dat.”

Link naar het artikel waaruit dit is overgenomen: [http://en.wikipedia .org/wiki/Comparison_of_e-mail_clients]

En hoe zou zweven zich vertalen naar mobiele apparaten? Daarom vind ik het antwoord van hierboven leuk:Long answer: you shouldn't.

Als iemand meer inzicht heeft in dit onderwerp, corrigeer me dan gerust. Dank je.

Antwoord 19

Dus dit is niet helemaal waar de gebruiker naar op zoek was, maar ik vond deze vraag op zoek naar een antwoord en kwam met iets vergelijkbaars. Ik had een aantal herhalende elementen die een nieuwe kleur/hover nodig hadden voor een tabblad erin. Ik gebruik het stuur, wat de sleutel is tot mijn oplossing, maar andere sjabloontalen kunnen ook werken.

Ik heb een aantal kleuren gedefinieerd en deze voor elk element in de stuursjabloon doorgegeven. Bovenaan de sjabloon heb ik een stijltag gedefinieerd en in mijn aangepaste klasse en zweefkleur geplaatst.

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

Vervolgens gebruikte ik de stijl in de sjabloon:

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

Misschien hebt u de !important

. niet nodig

Antwoord 20

Hoewel de context “dat mag niet” van toepassing is, kunnen er gevallen zijn waarin u dit toch wilt bereiken. Mijn gebruiksvoorbeeld was om dynamisch een zweefkleur in te stellen, afhankelijk van een bepaalde gegevenswaardeom dat te bereiken met alleen CSS waar u kunt profiteren van specificiteit.

Alleen CSS benaderen

CSS

/* Set your parent color for the inherit property */
.sidebar {
  color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
  color: inherit
}
.list-item a:hover {
  color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
  color: inherit !important;
}

Dan zal je opmaak er ongeveer zo uitzien:

Mark-up

<nav class="sidebar">
  <ul>
    <li class="list-item">
      <a
        href="/foo"
        class="dynamic-hover-color"
        style="color: #{{category.color}};"
      >
        Category
      </a>
    </li>
  </ul>
</nav>

Ik doe dit voorbeeld met behulp van een stuur, maar het idee is dat je alles neemt wat handig is voor je gebruik om de inline-stijl in te stellen (zelfs als het handmatig de kleur schrijft die je wilt bij de muisaanwijzer)

Antwoord 21

Ik moest javascript vermijden, maar kon met server-side code gaan.

dus ik genereerde een id, maakte een stijlblok, genereerde de link met die id. Ja, het is geldige 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>

a:hover {color:#FF00FF;}   /* Mouse-over link */

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

.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('https://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>