jQuery / js CSS :hover uitschakelen

[Verwijderd]

Ik heb een korte vraag.

Het 'normale' gedrag van de :hover pseudoclass in CSS is gedefinieerd in een stylesheet:

Cascading Stylesheet:

a {
background-color: #fff;
}
a:hover {
background-color: red;
}

Wat ik nu graag wil doen, is via jQuery dit hover gedrag uitschakelen, en vervangen door een funky jQuery animatie. Vraag me niet waarom , maar ik wil het.

Ik heb al een paar dingen geprobeerd, maar op de een of andere manier blijft die :hover class het gewoon doen.

JavaScript:

$("#nav a").bind("mouseenter",function(e){
e.preventDefault(); //werkt niet    
$(this).stop(); //werkt niet (logisch)      
});

$("#nav a").hover(function(e){
e.preventDefault(); //werkt niet
$(this).stop(); //werkt niet 
});

Ik heb zo het gevoel dat de oplossing voor dit probleem vrij voor de hand ligt, maar ik kom er na een tijdje googlen en zoeken enzo niet helemaal (lees: helemaal niet) uit. Kan iemand mij even helpen?

[Bosmonster]

Je kunt de hover niet uitschakelen, alleen overschrijven.

Als je iets simpels doet als:

JavaScript:

$('a').hover(function(){
   $(this).css('backgroundColor','#fff');
});

Zou dat het standaard gedrag moeten "overschrijven". Echt overschrijven is het natuurlijk niet, maar de CSS-hover wordt eerst uitgevoerd en zal door de JS vervolgens weer teruggezet worden.

[Verwijderd]

Ah crap, dus het hover gedrag omtoveren in een funky effect gaat eigenlijk alleen, als ik geen gebruik maak van een :hover, maar als ik bijvoorbeeld een .hover toevoeg en die dan laat infaden?

daar word ik niet echt gelukkig van

[Bosmonster]

Tuurlijk gaat dat wel, maar als je de standaard css:hover wilt 'annuleren', dan moet je die dus eerst even terugzetten naar de oorspronkelijke waarde. Daarna kun je natuurlijk iedere hover er aan toevoegen die je zelf wilt.

Mensen zonder JS hebben dan netjes de css:hover fallback.

[ Voor 12% gewijzigd door Bosmonster op 30-10-2009 12:11 ]

[Verwijderd]

/me is ff klooien

In elk geval bedankt.

[Flowmo]

Wees in je CSS anders specifieker wel <a> elementen je wilt stijlen met die hover. Wil je alleen links in bv een #content div targeten, dan zet je dat specifiek in je CSS. Zo kan je andere links, in bv de #header geen hover style meegeven en dit verder regelen met jquery.

Verder kan je in jquery met de functie animate() genoeg effecten tevoorschijn toveren.

Documentatie die op jquery.com staat zou je hierin genoeg op weg moeten helpen, wat je in feite ook al had kunnen vinden als je even goed gegoogled had.

[Verwijderd]

Getverdekkie, wat werkt dat lekker. Dank Bosmonster.

JavaScript:

$("#nav a").hover(function()
{
    var bgpos1 = $(this).css("background-position");
    var bgpos2 = bgpos1.replace('-35px','0px');
    $(this).css("background-position",""+bgpos2+""); //schakelt regulier :hover gedrag uit
});

works like a charm

Flowmo schreef op vrijdag 30 oktober 2009 @ 12:14:
Wees in je CSS anders specifieker wel <a> elementen je wilt stijlen met die hover. Wil je alleen links in bv een #content div targeten, dan zet je dat specifiek in je CSS. Zo kan je andere links, in bv de #header geen hover style meegeven en dit verder regelen met jquery.

Verder kan je in jquery met de functie animate() genoeg effecten tevoorschijn toveren.

Documentatie die op jquery.com staat zou je hierin genoeg op weg moeten helpen, wat je in feite ook al had kunnen vinden als je even goed gegoogled had.

Eh, ja. Dat weet ik allemaal wel. Dit is geen script request, rustig maar.

[ Voor 51% gewijzigd door Verwijderd op 30-10-2009 12:18 . Reden: reactie op Flomo toevoegen ]

[Flowmo]

Wat je hierboven zet in jquery, kan je toch ook makkelijk met css oplossen?

Cascading Stylesheet:

#nav a:hover {
background-position:0px !important;
}

Dit override je eerdere a:hover state al, geen JS voor nodig en het werk tenminste als mensen JS uit hebben geschakeld.

[Verwijderd]

Het idee is, dat ipv een gewone hover, de js gebruikers een funky effectje zien. Wie geen js gebruikt, krijgt de reguliere css hover.

[Bosmonster]

Om Spijtbetuiging even bij te staan met een lelijk voorbeeldje:

http://www.bosmonster.nl/html/hover_override.html

Zonder JS heb je gewoon de hover en wordt de tekst groot. Met JS wordt dat overruled en animeert ie leuk.

[Kiphaas7]

Is er niet zoiets als een algemene "cancel css hover", in plaats van de specifieke stijlattributen die bij het betreffende element horen te overschrijven? Niet dat ik het beter weet, maar dit gaat hoogstwaarschijnlijk stuk zodra je een ander design wilt...

[Bosmonster]

Het is niet de beste oplossing, want je moet er rekening mee houden dat als je de CSS aanpast je ook de bijhorende JS aanpast.

Maar een "algemene cancel css hover" is er niet nee

edit:

Je zou het nog iets netter op kunnen lossen door de cancel-waardes in CSS te declareren via een parent en dan die class toe te voegen aan de parent. Dan heb je iig alle styles in de CSS ipv ook in JS.

Wat Flowmo al zei dus, maar dan toevoegen met JS.

[ Voor 42% gewijzigd door Bosmonster op 30-10-2009 16:06 ]

[Verwijderd]

Wat je ook kunt doen is zoiets:

Cascading Stylesheet:

a {
  background-color: white;
}
body.geenjquery a:hover {
  background-color: red;
}

HTML:

<body class="geenjquery">
  <a href="#">Klik!</a>
</body>

JavaScript:

$('body').removeClass('geenjquery');
$('a').hover(
  function(e)
  {
    doeIetsCools();
  }
);

Vind ik persoonlijke de mooiste methode

(Is eigenlijk omgekeerd wat Bosmonster zegt, zie ik net.)

[ Voor 7% gewijzigd door Verwijderd op 30-10-2009 16:50 ]

[R4gnax]

Verwijderd schreef op vrijdag 30 oktober 2009 @ 16:49:
Vind ik persoonlijke de mooiste methode

Is ook wat ik voor wilde stellen.

[ZpAz]

Of juist andersom, wanneer JS staat een class an de betreffende link toevoegen, die de eerdere CSS hover canceled.

[Verwijderd]

Dan moet je 3 CSS definities hebben:
Niet-hover
Hover
Cancel-hover als class

Bij mijn manier maar 2:
Niet-hover
Hover als class