zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden :hover Problem im Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.04.2005, 15:51
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard :hover Problem im Firefox

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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.04.2005, 16:29
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

] 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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2005, 16:31
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Haa -> Das Scroll-Rad der Mouse löst auch den :hover !!
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2005, 16:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2004
Beiträge: 990
psycho_dmr befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 18.04.2005, 16:40
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 18.04.2005, 16:43
Philippp
Gast
 
Beiträge: n/a
Standard

Im Opera 7.54u2 geht das mit dem scrollen. Da verschwindet der Alert auch erst wenn man aus dem Browserfenster geht.
Gruß, Philippp
Mit Zitat antworten
  #7 (permalink)  
Alt 18.04.2005, 16:57
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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).
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 18.04.2005, 16:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2004
Beiträge: 990
psycho_dmr befindet sich auf einem aufstrebenden Ast
Standard

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... ^^)
Mit Zitat antworten
  #9 (permalink)  
Alt 18.04.2005, 17:37
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.037
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.04.2005, 17:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: :hover Problem im Firefox

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Firefox: float / margin Problem kadees CSS 4 14.01.2007 14:23
Problem mit CSS - Attribute für hover tzepf CSS 0 09.12.2006 17:56
navigation - ie6 :hover problem spook.68 CSS 2 05.12.2006 17:22
Hover Problem mit Opera 9 superlux001 CSS 1 28.11.2006 17:12
min-width Problem mit Firefox binutz CSS 10 11.07.2005 14:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:43 Uhr.