✔ .class abfragen und onmouseover ändern

J

juliusk

Grünschnabel
Guten Abend.

Folgender Wunsch:
Ich möchte auf eine komplette Seite bezogen
onMouseOver dem jeweiligen Element einer Klasse
eine andere Klasse zuweisen und onMouseOut
wieder zurück. Also im Prinzip das hier
Code: 
class="nichtOver" 
onMouseOver="this.className='jetztOver'"; 
onMouseOut="this.className='nichtOver'";
aber mit einer globalen Funktion auf alle Elemente
der Klasse angewandt. Ist die Frage verständlich?
Ich hatte sowas schonmal, bekomme es aber nicht
mehr hin. Kann mir vielleicht jemand weiterhelfen?

Gruß - Julius.
 
Zuletzt bearbeitet:
Moin,

da überwachst du am Besten die beiden Events fürs Dokument.
Da diese Events ja standardmässig "bubblen"...also an Kindelemente vererbt werden, hast du damit automatisch alle Seitenelemente überwacht :)
Musst dann nur noch ermitteln, was und wer gefeuert hat und dementsprechend den Klassen-Namen zuweisen...
Code: 
<script type="text/javascript">
<!--
document.onmouseout=document.onmouseover=function(e)
{
  e=(window.event)?window.event:e;
  o=(window.event)?e.srcElement:e.target;
  o.className=((e.type=='mouseover')?'jetzt':'nicht')+'Over';
}
//-->
</script>
 
Prima. Gute Nacht ;)
Könnt ihr mir denn sagen, wie das weitergeht?
Ich kappier noch nicht genug, um das selber zu schaffen.
die Steph
 
Moin :-)

Was geht wie weiter?
Die Eventüberwachung ist so fertig, du musst das Skript nur noch irgendwo in die Seite tun.

Tu kannst dann für alle beliebigen Elemente für die Selektoren .jetztOver und .nichtOver Formate definieren, somit ein Workaround für die Pseudoklasse :hover in Browsern, welche dies nur in Links interpretieren.
 
Hi,

und hier noch etwas Quellcode zur Verdeutlichung ;)

Code: 
<style type="text/css">
.nichtOver { color:red; }
.jetztOver { color:green; }
</style>
Code: 
<div class="nichtOver">Textbox, die ihre Schriftfarbe beim Überfahren ändert.</div>
 
Sorry, aber bei mir ändert sich da alles. Wild durcheinander.
Die Box immerDefault bleibt nicht. Also die ändert sich auch.


Code: 
<html>

<head>

<script type="text/javascript">
<!--
document.onmouseout=document.onmouseover=function(e)
{
  e=(window.event)?window.event:e;
  o=(window.event)?e.srcElement:e.target;
  o.className=((e.type=='mouseover')?'jetzt':'nicht')+'Over';
}
//-->
</script>

<style type="text/css">
<!--
.nichtOver { color:red; }
.jetztOver { color:green; }
-->
</style>

</head>

<body>

<br><div class="nichtOver">Textbox rot-grün-rot</div>
<br><div>Textbox immerDefault</div>

</body>

</html>


Und ich versteh noch nicht, wie ich damit mehrere
unterschiedliche Klassen bedienen kann.
Also so wie auf die Klassen jetztOver zu nichtOver mit Rot zu Grün
und dann auf die Klassen mitMaus zu ohneMaus mit blau zu gelb.

Aber das krieg ich nicht hin.
Bin ich jetzt richtig doof oder hänge ich nur grad? :confused:
 
Hat ja auch niemand behauptet, dass sie sich nicht ändern würde....sämtliche Seitenelemente werden von der Funktion erfasst.:-)

Hier mal das Ganze mit ner kleinen Änderung diesbetreffend...es werden jetzt nur noch Elemente berücksichtigt, welche als Klassennamen jetztOver oder nichtOver haben
Code: 
<script type="text/javascript">
<!--
document.onmouseout=document.onmouseover=function(e)
{
  
  e=(window.event)?window.event:e;
  o=(window.event)?e.srcElement:e.target;
  if(o.className.match(/(jetzt|nicht)Over/))
    {
      o.className=((e.type=='mouseover')?'jetzt':'nicht')+'Over';
    }
}
//-->
</script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück