Objekt ansprechen mit: document.getElementByName

[strukturart]

Hallo,

ich möchte mit onMouseOut/Over ein andere Objektgruppe verändern.
Was mach ich denn da falsch?

<a href="#" onMouseOut="document.getElementByName('zwei').style.color = 'green'";
onMouseOver="document.getElementsByName('zwei').style.color = 'gray'">button</a>
<a href="#" name="zwei">test</a>
<a href="#" name="zwei">test</a>

 

[CPoly]

Es gibt keine Funktion namens "getElementByName". Es gibt "getElementsByName", allerdings ist das name-Attribut nur bei Form-Elementen (input, textarea, select, etc.) erlaubt.

 

[strukturart]

Okay, danke für deine schnelle Antwort.
Hab`s jetzt auf .....byId geändert, da wird wird aber nur das erste Objekt "gestylt"
Warum? Vielleicht weil ID`s nur für einmalige Verwendung vorgesehen sind?

<a href="#" onMouseOut="document.getElementById('zwei').style.color = 'green'";
onMouseOver="document.getElementById('zwei').style.color = 'gray'">button</a>
<p Id="zwei">test</p>
<p Id="zwei">test</p>

 

[CPoly]

Vielleicht weil ID`s nur für einmalige Verwendung vorgesehen sind?

Exakt.

Entweder:
-du musst die Paragraphen in ein weiteres Element stecken und dieses dann mittels getElementById auswählen. Anschließend wählst du dann alle Paragraphen innerhalb dieses Elements mittels getElementsByTagName('p') und durchläufst sie in einer Schleife

Oder:
-du benutzt CSS

<a href="#" id="foo">button</a>
<p class="bar">test</p>
<p class="bar">test</p>

.bar {color: green;}
#foo:hover ~ .bar {color:gray;}

 

[strukturart]

So einfach mit css!!

Danke für deine Hilfe.

 

[strukturart]

Ich hab leider schon wieder ein Problem.
Die Objekte die angesprochen werden kommen mit include aus einer externen Datei, leider zeigt das :hover
keine Wirkung mehr.
Werde die Objekte im gleichen Code also ohne include erstellt geht es ohne Probleme.
Ich verstehe nicht ganz warum?

 

[CPoly]

Ohne Code kann man nur raten.

Damit das CSS funktioniert, müssen die p Elemente nachfolgende Geschwister des Links sein. Fügst du die eventuell woanders ein? Oder hast du die Klassen anders benannt?

 

[strukturart]

Hab das so:

<div id="kurse_container">
<?php
include("kurse.php");
?>
<a href="#" class="kurse_container">button</a>
<div class="kurse">test</div>
</div>

a.kurse_container:hover ~ .kurse {color:blue;}

Die Div`s die aus kurse.php kommen so aus:

<div class="kurse">am Montag...</div>

Stimmt das ParentChild?

 

[CPoly]

Jetzt stehen deine DIVs aber vor dem Link und nicht danach. Du kannst mit dem "~" Selektor aber nur nach vorne gucken. Deshalb klappt es nur bei dem einen DIV, welches nach dem Link kommt. Also musst du eventuell doch auf eine JavaScript Lösung zurückgreifen.