CSS Selektor Problem

Status
Nicht offen für weitere Antworten.
P

palatica

Mitglied
Bekomme die gewünschte Funktion einfach nicht hin.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
div {display:none;}

div[id="test"] {display:block;}

div[id="test"]:focus + div {display:block;}	
	</style>
</head>

<body>

<div id="test">angezeigt</div>
<div>nicht angezeigt</div>

</body>
</html>

Folgendes soll geschehen:

Alle divs sollen ausgeblendet werden, außer der div mit ID="test".
Beim überfahren des <div id="test">-Tag (also a:hover) wird der nachfolgende DIV sichtbar.

nur will ich nicht :hover haben sonder :focus.

Und das klappt nicht!

Warum?

Danke,
palatica
 
lt. Selfhtml (SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen):
:focus und :hover gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer funktioniert dies jedoch nicht.
Zum Vergrößern anklicken....

da dachte ich das das auch bei DIV geht.

Dann machen wir das mal so:

CSS:
Code: 
div[id="test"] a:focus + div {display:block;}

HTML:
Code: 
<div id="test"><a href="#">angezeigt</a></div>


Klappt bei mir auch nicht. Hab ich da etwa irgend ne Beziehung vergessen?
Code: 
div[id="test"]>a:focus + div {display:block;}

(Ich arbeite mit dem FireFox)
 
Der Selektor ist falsch gewählt. Der Selektor „div[id="test"] a:focus + div“ besagt, dass alle div-Elemente ausgewählt werden sollen, die unmittelbare nachfolgende Nachbarn von a-Elementen sind, die wiederum Kind-Elemente des div-Elements mit der ID „test“ sind und gleichzeitig fokussiert sind.

Was möchtest du überhaupt realisieren?
 
Hi,

ich kann dir evtl. sagen, warum es nicht klappt. In diesem von dir genannte Beispiel von Stu Nicholls sind zwei verschiedene Bildgrößen hinterlegt. Einmal sind die Bilder in der Vorschau mit der entsprechende Größen hinterlegt und für die eigentl. Bildansicht im Größenformat 640 * 480 sind die gleichen Bilder nur mit anderem Namen und genannter Größe hinterlegt.

Am besten du machst das Beispiel wie du es hast mit einme Bild, nur in angepasst auf die entsprechenden Größen für die Vorschau und für die eigentl. Ansicht. Dann geht auch dein Beispiel ;)

Wenn du den Quellcode von Stu Nicholls betrachtest und die unterschiedlichen Bildnamen für ein und das selbe Bild, kommst du auch dahinter ;)

Ein Beispiel:
Hier der Quellcode für CSS:
Code: 
a.slidea {background:url(spole/sph1.jpg);}

und für HTML:
Code: 
<a class="gallery slidea" href="#nogo"><span><img src="spole/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span></a>


Willst du eine bestimmte Bildgröße bei Focus angeben? Wenn ja wie groß?
 
Zuletzt bearbeitet:
Hi,

ich hab mir auch die anderen gallerien angeschaut (nur nicht den code), aber ich denke das es (eigentlich) nicht schwer sein dürfte das zu realisieren.
Im Prinzip ändert sich am Code von Hoverbox nichts.

Aber ich schau mal wie ich das lösen werde...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück