CSS: :hover falsch eingesetzt?

Hi!

Code...

Code:

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

<html>

<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <title>test</title>

<style type="text/css"><!--

#test {width:100px; height:18px; background-color:green; position:relative;}

#test:hover {width:200px; height:300px; }

--></style>

</head>

<body>

<div id="test">

HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO </p>

</div>

</body>

</html>

Die Anfangsgröße des divs reicht nicht aus und so werden alle HALLOs untereinander angezeigt. Sie sollten aber eigentlich erst angezeigt werden, wenn das :hover-Event eintritt. Vorher sollten nur die HALLOs angezeigt werden, die im bereich von #test zu sehen sein sollten( also width:100px; height:18px

. Wie ist das möglich? Wie müsste der Code dann aussehen?

**Meflin**

Solltest du mit dem IE testen: der kann :hover nur bei a-Elementen, da kannst du probieren bis du alt und grau wirst

Ansonsten wäre das Attribut der Wahl display: visible bzw. display: none!
edit: display: visible gibts ja garnicht

das war ja visibility: visible

Die IE7 unterstützt hover nun auch schon/endlich ^^. Nur was meinst du genau mit display? wie sieht das dann aus?

**mkinzler**

Mit dieser Eigenschaft kannst du eine Element Ein- und Ausblenden

**alcaeus**

Zitat von Meflin:

Solltest du mit dem IE testen: derIE6 kann :hover nur bei a-Elementen, da kannst du probieren bis du alt und grau wirst

IE7 im Standard-Compliance-Mode kann :hover auch bei allen Elementen.

So siehts schon besser aus

BTW, dein DOCTYPE ist unvollstaendig. Mach mal den korrekten DOCTYPE fuer dein HTML rein:

markieren

Code:

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

        "http://www.w3.org/TR/html4/loose.dtd">

Fuer den IE ist die DTD erforderlich, damit er nicht in den Quirks-Mode geht. Wichtig ist aber auch, dass der DOCTYPE das Erste ist, was im Dokument erscheint.

Greetz
alcaeus

Zitat von mkinzler:

Mit dieser Eigenschaft kannst du eine Element Ein- und Ausblenden

naja nur das erste HALLO sollte ja zu sehen sein. Wie kann man das machen? Ich kann ja von #test nicht auf ein anderes DIV zugreifen oder?

**Meflin**

markieren

Code:

			<style type="text/css"><!-- 

#test {

  width:100px; 

  height:18px; 

  background-color:green; 

  position:relative;

} 

#test:hover {

  width:200px; 

  height:300px; 

} 

#test .inner {

  display: none;

}

#test .inner:hover {

  display: inline;

}

--></style>

...

<div id="test">

Text<span class="inner">Text</span>

</div>

Das Problem ist nun: Das, was unter "inner" steht sieht man nun nie...

**Meflin**

Gut dann veruschs so:

markieren

Code:

			#test:hover span {

  display: block;

}

ja! so gehts... danke!

CSS: :hover falsch eingesetzt?

CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Re: CSS: :hover falsch eingesetzt?

Forumregeln

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#2 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:18 Solltest du mit dem IE testen: der kann :hover nur bei a-Elementen, da kannst du probieren bis du alt und grau wirst Ansonsten wäre das Attribut der Wahl display: visible bzw. display: none! edit: display: visible gibts ja garnicht das war ja visibility: visible Leo S. https://github.com/leoschweizer
	Zitat

abc newbee (Gast) n/a Beiträge	#3 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:19 Die IE7 unterstützt hover nun auch schon/endlich ^^. Nur was meinst du genau mit display? wie sieht das dann aus?
	Zitat

mkinzler (Moderator) Registriert seit: 9. Dez 2005 Ort: Heilbronn 39.861 Beiträge Delphi 11 Alexandria	#4 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:21 Mit dieser Eigenschaft kannst du eine Element Ein- und Ausblenden Markus Kinzler
	Zitat

abc newbee (Gast) n/a Beiträge	#6 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:22 Zitat von mkinzler: Mit dieser Eigenschaft kannst du eine Element Ein- und Ausblenden naja nur das erste HALLO sollte ja zu sehen sein. Wie kann man das machen? Ich kann ja von #test nicht auf ein anderes DIV zugreifen oder?
	Zitat

abc newbee (Gast) n/a Beiträge	#8 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:31 Das Problem ist nun: Das, was unter "inner" steht sieht man nun nie...
	Zitat

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#9 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:35 Gut dann veruschs so: markieren Code: #test:hover span { display: block; } Leo S. https://github.com/leoschweizer
	Zitat

abc newbee (Gast) n/a Beiträge	#10 Re: CSS: :hover falsch eingesetzt? 28. Apr 2007, 22:44 ja! so gehts... danke!
	Zitat