:hover Problem im Firefox

ulle · #1 (**permalink**) 18.04.2005, 14:51

Ich nu wieder ........

Ich möchte eine Alert-Box für gute "Browser", die auf :hover angezeigt wird. Lieber wäre mir :focus/] auf das List-Item wollte ich mit dem LINK in der Alert-Box auflösen, da ja die Grund-Ebene durch den Transparent-Layer nicht mehr für die Mouse (Mouse-Out) erreichbar ist.

Nur wird die Alert-Box wieder weggeblendet sobald die Mouse über der Alert-Box steht. Während die Scrollbars, falls angezeigt, bedienbar sind.

Nun meine Frage, was fehlt mir damit die Alert-Box bei Mouseover stehen bleibt, ich sehe es nicht.

Das mir jetzt keiner mit JavaScript kommt, oder mir erklärt das es im IE nicht funktioniert........

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*			{
			margin:  0;
			padding: 0;
			
			/* Tabellen
			 */
			border-collapse:collapse;
			border-spacing: 0;
			}

html		{
			/* permanent Scrollbalken
			 * Gecko => nicht Valide
			 */
			overflow: -moz-scrollbars-vertical;
			}
			
html,
body		{
			color:		#000000;
			background:	#FFDD22;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{ 
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}
			
.trans-layer
			{
			/* anzeige erst mit :hover
			 * 
			 * sperrt viewport fuer Mouse/klick
			 */
			display: none;
			
			/* Containing Block initial
			 */
			position: absolute;
			
			width:  100%;
			height: 100%;
			
			top:  0;
			left: 0;

			background-color: transparent;
/*			background-color: #cccccc;
*/			}

			
.alert-box
			{
			/* anzeige erst mit :hover
			 */
			display: none;
			
			/* Containing Block initial
			 */
			position: absolute;
			
			width:  50%;
			height: 9em;
			
			top:  10%;
			left: 24%;
			}

/* Shadow
 */
.alert-box strong
			{
			/* Child-Element Full-Size
			 */
			display: block;
			height: 100%;
			
			/* alert-box
			 * -moz-opacity: 1.0;         |Gecko (Firefox kann opacity)
			 * -khtml-opacity: 1.0;       |Safari 1.1
			 * filter:alpha(opacity=70);  |Internet Exploer 
			 */
			opacity: .4;

			background-color:	#333333;
			}

.alert-box span
			{
			display: block;
			
			position: absolute;
			right:  .4em;
			bottom: .4em;
			
			/* Child-Element Full-Size
			 */
			width: 100%;
			height: 100%;
			
			overflow: auto;
			
			/* kein Box-Model Problem [absolute]
			 */
			border: 1px solid #000000;
			
			background-color:	#2299FF;
			}
			
.alert-box em
			{
			/* Child-Element Full-width-Size
			 */
			display: block;
			
			padding: 1em;
		
			font-size: .8em;
			font-style: normal;
			}

li:hover .trans-layer,
li:hover .alert-box
			{
			display: block;
			}

/*]]>*/
</style>

</head>
<body>

<ul>
	[*]Alert-Box anzeigen
		<span class="trans-layer"></span>
		<span class="alert-box">
			

			<span>
				Alert-Box ausblenden
				
				Frankfurter Analysten halten Zeitungsberichte über einen Firmenjäger-Angriff auf DaimlerChrysler für durchaus plausibel. Wegen der gravierenden Managementfehler von Konzernchef Jürgen Schrempp sei der Stuttgarter Autokonzern inzwischen theoretisch ein Kandidat für eine Übernahme durch aggressive Finanzinvestoren.
				
			</span>
		</span>
	[/list]

</body>
</html>

ulle · #2 (**permalink**) 18.04.2005, 15:29

] mit einem LINK nicht auflösen kann.

Dann ist es so wie es nun ist wohl eine schöne Alert-Box, nun bleibt die Frage - welche Browser ausser Firefox können es. Zumindest so wie mein 2. Beispiel.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/

*			{
			margin:  0;
			padding: 0;
			
			/* Tabellen
			 */
			border-collapse:collapse;
			border-spacing: 0;
			}

html		{
			/* permanent Scrollbalken
			 * Gecko => nicht Valide
			 */
			overflow: -moz-scrollbars-vertical;
			}
			
html,
body		{
			color:		#000000;
			background:	#FFDD22;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{ 
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}
			
.trans-layer
			{
			/* anzeige erst mit :hover
			 * 
			 * sperrt viewport fuer Mouse/klick
			 */
			display: none;
			
			/* Containing Block initial
			 */
			position: absolute;
			
			width:  100%;
			height: 100%;
			
			top:  0;
			left: 0;
			
			/* trans-layer
			 * -moz-opacity: 1.0;         |Gecko (Firefox kann opacity)
			 * -khtml-opacity: 1.0;       |Safari 1.1
			 * filter:alpha(opacity=70);  |Internet Exploer 
			 */
			opacity: .2;

/*			background-color: transparent;
*/			background-color: #333333;
			}

			
.alert-box
			{
			/* anzeige erst mit :hover
			 */
			display: none;
			
			/* Containing Block initial
			 */
			position: absolute;
			
			width:  50%;
			height: 9em;
			
			top:  10%;
			left: 24%;
			}

/* Shadow
 */
.alert-box strong
			{
			/* Child-Element Full-Size
			 */
			display: block;
			height: 100%;
			
			/* alert-box
			 * -moz-opacity: 1.0;         |Gecko (Firefox kann opacity)
			 * -khtml-opacity: 1.0;       |Safari 1.1
			 * filter:alpha(opacity=70);  |Internet Exploer 
			 */
			opacity: .4;

			background-color:	#333333;
			}

.alert-box span
			{
			display: block;
			
			position: absolute;
			right:  .4em;
			bottom: .4em;
			
			/* Child-Element Full-Size
			 */
			width: 100%;
			height: 100%;
			
			overflow: auto;
			
			/* kein Box-Model Problem [absolute]
			 */
			border: 1px solid #000000;
			
			background-color:	#2299FF;
			}
			
.alert-box em
			{
			/* Child-Element Full-width-Size
			 */
			display: block;
			
			padding: 1em;
		
			font-size: .8em;
			font-style: normal;
			}

li:hover .trans-layer,
li:hover .alert-box
			{
			display: block;
			}

/*]]>*/
</style>

</head>
<body>

<ul>
	[*]Alert-Box anzeigen
		<span class="trans-layer"></span>
		<span class="alert-box">
			

			<span>
				
				Frankfurter Analysten halten Zeitungsberichte über einen Firmenjäger-Angriff auf DaimlerChrysler für durchaus plausibel. Wegen der gravierenden Managementfehler von Konzernchef Jürgen Schrempp sei der Stuttgarter Autokonzern inzwischen theoretisch ein Kandidat für eine Übernahme durch aggressive Finanzinvestoren.
				
			</span>
		</span>
	[/list]
</body>
</html>

ulle · #3 (**permalink**) 18.04.2005, 15:31

Haa -> Das Scroll-Rad der Mouse löst auch den :hover !!

psycho_dmr · #4 (**permalink**) 18.04.2005, 15:37

will dich ja nicht nerven, aber wie zum teufel soll ich mit der maus in die infobox kommen um zu scrollen?

(ff 1.0.2, beide bsps)

ulle · #5 (**permalink**) 18.04.2005, 15:40

Wieso sollte mich die Frage nerven

Bin froh wenn einer mitdenkt.

Einfach um die BOX fahren, nicht über BLAU, von rechts kommen.........

Aber genau das ist es ja, wie will man dem User das erklären.

#6 (**permalink**) 18.04.2005, 15:43

Im Opera 7.54u2 geht das mit dem scrollen. Da verschwindet der Alert auch erst wenn man aus dem Browserfenster geht.
Gruß, Philippp

ulle · #7 (**permalink**) 18.04.2005, 15:57

Der Anwendungsfall wird zusätzlich durch die Position des List-Item (oder welches Element auch immer), welches die Alert-Box beinhaltet, auf der WEBsite beschränkt. Die gesamte nummer mit der schönen Optik geht nur wenn sich dieses Element im obern Teil der WEBsite befindet, also kleinste Auslösung (800x600).

psycho_dmr · #8 (**permalink**) 18.04.2005, 15:57

hmm naja, find ich n bissl scheisse, wenn man ausversehn nich die scrollbar trifft sondern nen bissl weiter links landet wars das ... alles nochma von vorne o,O

leider kann CSS nich sowas wie, bei hover anzeigen und dann noch 5secs nachdem man runter is mit der maus ... wenn man in der zeit aufs blaue kommt bleibt die da (so würd ichs jetz mit js lösen... ^^)

andir · #9 (**permalink**) 18.04.2005, 16:37

Das Seiten sperren funktioniert wie beschrieben - ausser im I.E. ^^
Problem des "vergessenen" Hover schiebe ich mal darauf, dass das gehoverte Element nicht mehr gehovert ist, wenn .alert-box samt weiteren Inhalten dargestellt wird.

Ich gehe dabei von der Reihenfolge im Quelltext aus, wonach a vor .trans-layer vor den ganzen spans und dem em kommt.... scheint mir klar, dass dann eine "Ent-hoverung" beim Berühren dieser Bereiche passiert, da die spans und das em als letztes initiiert werden. (schreckliches Wort, aber Defokussierung triffts ja auch net)
Mit z-index gehts ja auch nicht.

Ist es Dir möglich, etwas von der Funktion von .trans-layer nach deiner Liste einzufügen? Das müßte dann alles sperren können. (Nur so ein Gedanke)

grüsse andir

fricca · #10 (**permalink**) 18.04.2005, 16:53

Zitat:

Zitat von ulle

Nur wird die Alert-Box wieder weggeblendet sobald die Mouse über der Alert-Box steht. Während die Scrollbars, falls angezeigt, bedienbar sind.

Damit hab' ich im FF auch schon gekämpft.
Sobald man overflow:auto aus .alert-box span rausnimmt, bleibt die Box brav stehen. Das finde ich ziemlich unlogisch - aber kann man das einen Bug nennen?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 12:04
Firefox: float / margin Problem	kadees	CSS	4	14.01.2007 13:23
Problem mit CSS - Attribute für hover	tzepf	CSS	0	09.12.2006 16:56
Hover Problem mit Opera 9	superlux001	CSS	1	28.11.2006 16:12
min-width Problem mit Firefox	binutz	CSS	10	11.07.2005 13:27