"this" und "firstChild"?

[bleibert]

Hallo zusammen!

Ich habe ein DIV, der mir ein farbiges Quadrat zaubert, und darin eine H1 mit weißem Text, der zunächst unsichtbar ist, und bei Mauskontakt sichtbar werden soll. Das ganze klappt "klassisch" mit ID ohne Probleme:

<div class="farbig"  
 onmouseover="document.getElementById('berta').style.visibility='visible'"  
 onmouseout="document.getElementById('berta').style.visibility='hidden'">  
<h1 id="berta">berta</h1>  
</div>

Jetzt möchte ich das aber gerne ohne ID lösen. Wie kann ich denn den H1 direkt ansprechen? Ich habe es mit THIS und firstChild versucht:

this.firstChild.style.visibility='visible'

Aber das funzt nicht. Warum? Und wie geht's?

Vielen Dank und viele Grüße,
Dennis.

[bleibert]

P.S.: Mit Mauskontakt meine ich Maus über Quadrat (DIV), nicht Maus über Text (H1)!

[1UnitedPower]

Gibt es Gründe warum die Überschrift bei Überfahren des div-Containers eingeblendet werden soll?

Ansonsten wäre auch eine CSS-Lösung denkbar:

h1{ visibility: hidden; }  
h1:hover{ visibility: visible; }

[1UnitedPower]

h1{ visibility: hidden; }

h1:hover{ visibility: visible; }

  
Vergiss meinen ersten Satz, so gehts auch:  
  
~~~css
div h1{ visibility: hidden; }  
div:hover h1{ visibility: visible; }

[bleibert]

div h1{ visibility: hidden; }

div:hover h1{ visibility: visible; }

  
Danke für den Tipp! Das ist auch gut. Allerdings habe ich noch eine klitzekleine Kleinigkeit vergessen: Es gibt mehrere DIV-Quadrate auf der Seite. Alle mit unterschiedlichem Text. Und es soll jeweils der Text "aufleuchten", über dessen Quadrat man fährt. Deswegen wollte ich ja immer einfach innerhalb eines bestimmten DIV tags den nächsten (und einzigen) H1 tag ansprechen, bzw. sein style Attribut verändern. Die Architektur ist immer  
  
~~~html
<div>  
<h1>wort</h1>  
</div>

Es gibt also innerhalb eines DIV tags nur ein Element, und das ist ein H1 tag. Im Prinzip brauche ich bei ONMOUSEOVER ein "schnapp Dir den nächsten H1 und setze visibility auf visible"-Argument.

[1UnitedPower]

Es gibt also innerhalb eines DIV tags nur ein Element, und das ist ein H1 tag.

Na hoffentlich nicht, du meinst ein div-ELEMENT enthält als einziges Kind immer ein h1-ELEMENT.

Die präsentierte CSS-Lösung weist außerdem genau das von dir gewünschte Verhalten auf. Im Übrigen solltest du es in Erwägung ziehen, dass div-Element gleich wegzulassen, wenn ihm keine genauere Bedeutung zuteil ist.

[bleibert]

Die präsentierte CSS-Lösung weist außerdem genau das von dir gewünschte Verhalten auf. Im Übrigen solltest du es in Erwägung ziehen, dass div-Element gleich wegzulassen, wenn ihm keine genauere Bedeutung zuteil ist.

Stimmt! Bin ganz baff! Vielen Dank!

Das DIV Element brauche ich, das definiert Größe, Farbe, Hintergrundbild, Abstände, und gibt mir den Rahmen innerhalb dessen ich das H1 element positionieren kann.

[1UnitedPower]

Das DIV Element brauche ich, das definiert Größe, Farbe, Hintergrundbild, Abstände, und gibt mir den Rahmen innerhalb dessen ich das H1 element positionieren kann.

Das sind alles Eigenschaften, die du auch direkt der Überschrift geben kannst.

[Gunnar Bittersmann]

@@bleibert:

nuqneH

Das DIV Element brauche ich, das definiert Größe, Farbe, Hintergrundbild, Abstände, und gibt mir den Rahmen innerhalb dessen ich das H1 element positionieren kann.

Nö, brauchst du nicht. Du gibst dem Element (h1? Dazu später.) Breite und Höhe. Den Text richtest du mit padding aus. Damit dies nicht die Box vergrößert, ist ein entsprechendes Boxmodell zu wählen. Den Text nach links aus der Box laufen zu lassen geht mit padding (das keine negativen Werte haben darf) nicht, aber es gibt ja noch text-indent.

Textfarbe ist 'transparent', bei :hover weiß.

Deine Boxen sind aber keine Überschriften. Überschriften stehen über einem Abschnitt; das ist bei dir nicht der Fall. Also ist die Auszeichnung als h1 falsch. Wenn es sich um eine Navigation handelt (soll es das wirklich?), hast du sowieso a-Elemente, die du als Boxen stylen kannst:

<nav id="mystery-meat">  
  <a href="path/to/foo">Foo</a>  
  <a href="path/to/bar">Bar</a>  
</nav>

(Man könnte die a-Elemente auch noch in eine Liste tun, aber das muss nicht sein.)

Sämtliche Style-Angaben solltest du im Stylesheet notieren, also keine @style-Attribute im HTML verwenden.

Um die Boxen unterschiedlich zu stylen, könntest du über Attributselektoren à la a[href="path/to/foo"] gehen, was den Nachteil hat, dass man das Stylesheet ändern muss, wenn sich Linkziele ändern. Oder jedem Link eine ID geben: <a id="foo" href="path/to/foo">Foo</a>.

Qapla'

[bleibert]

Hier der link:

http://minolta.eazypix.de/index_2.html

ist noch ohne weitere Funktion, nur mal die Startseite.

[1UnitedPower]

ist noch ohne weitere Funktion, nur mal die Startseite.

Da ist aber noch die Javascript-Lösung aktiv.

[bleibert]

Da ist aber noch die Javascript-Lösung aktiv.

Jein, nur noch beim dunkelblauen Quadrat - hab ich vergessen rauszulöschen. Schau jetzt mal, hab's korrigiert. Klappt einwandfrei mit CSS.

Ganz unten habe ich mal ein rotes Quadrat nur als H1 Element gemacht. Aber da habe ich Probleme, dass es immer 350x350px misst (da gibt's bestimmt auch ein passendes Attribut für). Nur wie soll ich da nur den Taxt ausblenden (bzw einblenden)? Mit hover verschwindet immer die ganze box.

[1UnitedPower]

Jein, nur noch beim dunkelblauen Quadrat - hab ich vergessen rauszulöschen. Schau jetzt mal, hab's korrigiert. Klappt einwandfrei mit CSS.

Das sieht doch schon ganz schick aus.

Ganz unten habe ich mal ein rotes Quadrat nur als H1 Element gemacht. Aber da habe ich Probleme, dass es immer 350x350px misst (da gibt's bestimmt auch ein passendes Attribut für). Nur wie soll ich da nur den Taxt ausblenden (bzw einblenden)? Mit hover verschwindet immer die ganze box.

Jetzt, wo ich die Demo-Seite sehe hat dein Container durchaus eine Daseinsberechtigung, also scher dich nicht weiter drum. Wobei der Verwendungszweck der Kacheln sich noch nicht erschließen lässt. Wenn es eine Navigation werden soll, solltest du das nav-Element in Erwägung ziehen, dazu müsstest du allerdings auch zum HTML5-Doctype wechseln.

Und gönn dir mal einen Blick auf das Metro-CSS-Framework.

[bleibert]

Jetzt, wo ich die Demo-Seite sehe hat dein Container durchaus eine Daseinsberechtigung, also scher dich nicht weiter drum. Wobei der Verwendungszweck der Kacheln sich noch nicht erschließen lässt. Wenn es eine Navigation werden soll,

soll es

solltest du das nav-Element in Erwägung ziehen, dazu müsstest du allerdings auch zum HTML5-Doctype wechseln.

Aha.

Und gönn dir mal einen Blick auf das Metro-CSS-Framework.

Mache ich. Vielen Dank nochmal!

[Gunnar Bittersmann]

@@bleibert:

nuqneH

Wenn es eine Navigation werden soll,

soll es

O je, Mystery Meat Navigation.

Bist du sicher, dass es soll? Hat deine Website denn spielerischen oder informativen Charakter?

Qapla'

[blibert]

O je, Mystery Meat Navigation.

Bist du sicher, dass es soll? Hat deine Website denn spielerischen oder informativen Charakter?

Keine Angst, das ist ja nur ein leerer Prototyp. Meine Kästchen fliegen nicht rum, sondern sind statisch. Außerdem haben sie unertschiedliche Farben, und sind so per se schon mal unterscheidbar. Und als Sahnehäubchen soll jedes Kästchen auch noch ein aussagekräftiges icon bekommen - die Schrift soll dann nur beim Drüberfahren aufleuchten. Rein redundante Spielerei. Und die Seite ist schon höchst informativ (lass einfach mal das index-2.html weg), und wird noch viel informativer.

[Gunnar Bittersmann]

@@blibert:

nuqneH

Meine Kästchen fliegen nicht rum, sondern sind statisch.

Darum ging’s nicht.

Außerdem haben sie unertschiedliche Farben, und sind so per se schon mal unterscheidbar.

Darum auch nicht.

Sondern darum, dass nicht (sofort) erkennbar ist, was sich hinter den Kästchen verbirgt, sondern erst bei Hover. Oder niemals, denn auf vielen Geräten gibt es kein Hover.

Und als Sahnehäubchen soll jedes Kästchen auch noch ein aussagekräftiges icon bekommen - die Schrift soll dann nur beim Drüberfahren aufleuchten.

Sind die Icons denn aussagekräftig genug, dass man ohne die zugehörigen Texte die Navigation benutzen kann?

Qapla'

[bleibert]

Und als Sahnehäubchen soll jedes Kästchen auch noch ein aussagekräftiges icon bekommen - die Schrift soll dann nur beim Drüberfahren aufleuchten.

Sind die Icons denn aussagekräftig genug, dass man ohne die zugehörigen Texte die Navigation benutzen kann?

Naja, wenn für den link auf die Kamera-Seite dort ein Kamera-Symbol steht, würde ich das durchaus als "aussagekräftig" deklarieren.

[Gunnar Bittersmann]

@@bleibert:

nuqneH

this.firstChild.style.visibility='visible'
Aber das funzt nicht. Warum?

Weil der erste Kindknoten des div-Elements nicht das h1-Element ist, sondern ein Textknoten (Whitespace).

Und wie geht's?

Wie 1UnitedPower zeigte: Ohne JavaScript.

Qapla'

[bleibert]

Weil der erste Kindknoten des div-Elements nicht das h1-Element ist, sondern ein Textknoten (Whitespace).

Stümmt. Wenn man's mal so betrachtet, liegt da noch ziemlich viel dazwischen.

Ohne JavaScript.

:))

Siehe meine Antwort
Krieg ich das nur mit CSS hin, bei mehreren DIV tags jeweils nur den unter der Maus anzusprechen, und nicht bei allen DIV tags dann die H1 aufleuchten zu lassen?

[bleibert]

Okay, bin schon still...

Wundert mich zwar, aber funzt!

Vielen Dank!

[Matthias Apsel]

Om nah hoo pez nyeetz, bleibert!

Krieg ich das nur mit CSS hin, bei mehreren DIV tags jeweils nur den unter der Maus anzusprechen, und nicht bei allen DIV tags dann die H1 aufleuchten zu lassen?

Verwechsle nicht Tag und Element. Der Selektor :hover bedeutet: Wähle die Elemente über denen gerade der Mauszeiger schwebt. Wenn das nur eins ist, ...

Matthias