Delphi-PRAXiS - CSS: :hover falsch eingesetzt?

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - CSS: :hover falsch eingesetzt? (https://www.delphipraxis.net/91071-css-hover-falsch-eingesetzt.html)

abc newbee

28. Apr 2007 22:14

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

28. Apr 2007 22:18

Re: CSS: :hover falsch eingesetzt?

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 :stupid: das war ja visibility: visible :roll:

abc newbee

28. Apr 2007 22:19

Re: CSS: :hover falsch eingesetzt?

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

mkinzler

28. Apr 2007 22:21

Re: CSS: :hover falsch eingesetzt?

Mit dieser Eigenschaft kannst du eine Element Ein- und Ausblenden

alcaeus

28. Apr 2007 22:22

Re: CSS: :hover falsch eingesetzt?

Zitat:

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:

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

abc newbee

28. Apr 2007 22:22

Re: CSS: :hover falsch eingesetzt?

Zitat:

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

28. Apr 2007 22:26

Re: CSS: :hover falsch eingesetzt?

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>

abc newbee

28. Apr 2007 22:31

Re: CSS: :hover falsch eingesetzt?

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

Meflin

28. Apr 2007 22:35

Re: CSS: :hover falsch eingesetzt?

Gut dann veruschs so:

Code:

			#test:hover span {

  display: block;

}

abc newbee

28. Apr 2007 22:44

Re: CSS: :hover falsch eingesetzt?

ja! so gehts... danke!

Thorben77

28. Apr 2007 23:47

Re: CSS: :hover falsch eingesetzt?

Du könntest auch mal ein white-space: nowrap für den Absatz ausprobieren. Es kann nur passieren, dass dann ein Wort abgeschnitten wird.

Außerdem ist es eigentlich überflüssig, CSS in HTML-Dateien auszukommentieren, wenn du nicht grade erwartest, dass die Besucher deiner Seiten uralte Browser verwenden, die noch kein CSS verstehen.

Alle Zeitangaben in WEZ +1. Es ist jetzt 21:56 Uhr.