Infobox

[frank the alien]

Hallo!

Habe nach Selfhtml-Vorbild hier CSS.Infobox eine Seite mit mehreren Infoboxen gebaut, und frage mich nun, ob folgendes Verhalten beeinflusst werden kann:

Normalerweise bleibt der Span-Text einer Box stehen, wenn man mit der Maus über dem Span-Bereich bleibt, ebenso wie wenn man über dem "Pseudolink" bleibt, der ja überhaupt den Span-Bereich erst sichtbar macht.

Lässt sich das auf einfache Art ändern, dahingehend, dass der Span-Bereich schon verschwindet, sobald man den Pseudolink verlässt?

Konkret ist der Fall der, dass bei mehreren Infoboxen auf einer Seite der Span-Bereich der EINEN Box, den Link zur NÄCHSTEN überdeckt, sodass man erst ein paar mmn überflüssige Mausbewegungen in Kauf nehmen muss, um da ran zu kommen.

Thx, Grüße

[ChrisB]

Hi,

Lässt sich das auf einfache Art ändern, dahingehend, dass der Span-Bereich schon verschwindet, sobald man den Pseudolink verlässt?

Du kannst den Span wieder auf unsichtbar schalten, wenn er selbst sich im Zustand :hover befindet.

MfG ChrisB

[frank the alien]

Hi,

Lässt sich das auf einfache Art ändern, dahingehend, dass der Span-Bereich schon verschwindet, sobald man den Pseudolink verlässt?

Du kannst den Span wieder auf unsichtbar schalten, wenn er selbst sich im Zustand :hover befindet.

MfG ChrisB

Okay, und jetzt kommt das Problem:

Der Span-Bereich und der Ursprungslink überlappen sich, sodass bei

#box a:hover span { display:none; }

gleich mal keine Box auftauchen würde.

Ich müsste das "display" vom Span irgendwie abhängig machen vom "#box a:hover," anstatt vom "#box a:hover span," dann wär das Problem gelöst, oder?

[Malcolm Beck´s]

مرحبا

Ich müsste das "display" vom Span irgendwie abhängig machen vom "#box a:hover," anstatt vom "#box a:hover span," dann wär das Problem gelöst, oder?

Chris meinte wohl eher sowas hier

(ungetestet)
#box span:hover { display:none; }

Wobei du dir die besagte Infobox auch mal ohne CSS ansehen, und dir überlegen solltest, ob du dass wirklich so haben willst (für eine kleine Info dein HTML zuzumüllen).

mfg

[apsel]

Om nah hoo pez nyeetz, franc!

Wobei du dir die besagte Infobox auch mal ohne CSS ansehen, und dir überlegen solltest, ob du dass wirklich so haben willst (für eine kleine Info dein HTML zuzumüllen).

Vielleicht passt diese Lösung besser zu dem was du vorhast. Dort gibt es auch zwei Verweise auf ähnliche Ideen.

Matthias

[Malcolm Beck´s]

مرحبا

Vielleicht passt diese Lösung besser zu dem was du vorhast. Dort gibt es auch zwei Verweise auf ähnliche Ideen.

Die eine kommt mir sogar bekannt vor.

Das Problem ist, dass viele anscheinend immer noch der Meinung sind, einen längst in die Jahre gekommenen Browser nachhaltig unterstützen zu müssen.

Wer in der letzten Zeit mal ein paar Tage mit diesem häufchen Elend die Unendlichen weiten des Web ertragen hat, und immer noch der Meinung ist, dass dieses etwas weiterhin unterstützt gehört, dem kann man nur noch viel Spass und gutes gelingen wünschen.

mfg

[frank the alien]

Ich hab jetzt mal versucht, das mit einem Stück Javascript zu regeln, klappt aber offenbar nicht:

function HideSpan () {  
  
document.getElementsByTagName("span")[i].style.display = "none";  
  
}

Und im body:

<a onmouseout="HideSpan()">

Lieg ich sehr daneben?

[apsel]

Om nah hoo pez nyeetz, frank the alien!

Ich hab jetzt mal versucht, das mit einem Stück Javascript zu regeln

Javascript ist hier nicht notwendig. Man sollte bei einfachen Geschichten nach Möglichkeit auf JS verzichten, da dieses vom Nutzer ausgeschaltet werden kann.

Matthias

[frank the alien]

Aaaalso:

Soweit ich das gesehen habe, haben die Tooltips das selbe Problem wie meine Boxen, dass der Span-Bereich auch bei span:hover stehen bleibt.
Hab mich allerdings noch nicht soweit reinvertieft, ob man das bei dieser Vorgehensweise einfacher abschalten kann.

Was ich hingegen gemacht habe, und da seh ich die Kritik schon fliegen, ist eine Lösung mit Javascript (ja, eh), die in IE, Firefox, Opera und Safari mmn ganz gut ausschaut. Opera und Safari lassen allerdings, wenn der Spanbereich zugeht, noch kurz den unformatierten Text aus dem Spanbereich aufblitzen, kann man das fixen?

Der Code ist jedenfalls jener, als Ergänzung zum CSS-Teil:

function ShowSpan () {  
  
document.getElementsByTagName("span")[0].style.display = "block";  
  
}  
  
function HideSpan () {  
  
document.getElementsByTagName("span")[0].style.display = "none";  
  
}

und im body:

<a href="#"><h1 onmouseover="ShowSpan()" onmouseout="HideSpan()">Achtung Box</h1><span onmouseover="HideSpan()">Boxentext</span>

Ideen?

[apsel]

Om nah hoo pez nyeetz, frank the alien!

Meine Tooltipps haben kein span-Element, sie sind selbst ein span-Element, der Tooltipp wird via :after realisiert.

btw. Um zu hovern, ist kein a-Element notwendig.

Ja, es ist richtig, wenn man mit dem Mauszeiger über den Tooltipp fährt, bleibt er sichtbar.

Ja, es ist auch richtig: .tooltipp:hover:after:hover ist offensichtlich kein gültiger CSS-Selektor.

Matthias

[apsel]

Om nah hoo pez nyeetz, frank the alien!

Allerdings funktioniert ChrisBs Tipp an der Original CSS-Infobox aus selfhtml.

so: #box a:hover span:hover {display: none;}
und auch so: #box a span:hover {display: none;}

getestet im FF 3.6

Matthias

[frank the alien]

Om nah hoo pez nyeetz, frank the alien!

Allerdings funktioniert ChrisBs Tipp an der Original CSS-Infobox aus selfhtml.

so: #box a:hover span:hover {display: none;}
und auch so: #box a span:hover {display: none;}

getestet im FF 3.6

Matthias

Halleluja!

Opera und IE verstehen den auch, nur Safari spielt nicht mit.

Und ich Depp hab das natürlich nicht bemerkt, weil Safari mein erstes Testgebiet ist.

Weiß einer wieso das da nicht geht?

Dankeschön.

[Malcolm Beck´s]

مرحبا

Safari spielt nicht mit.

Was genau macht Safari falsch? Wenn die möglichkeit besteht, wäre ein Online-Beispiel sehr hilfreich.
Ansonsten das Bsp. auf genau dieses Problem reduzieren und hier ein Copy&Paste-Fähiges Bsp. posten.

Weiß einer wieso das da nicht geht?

Safari unter Windows?

mfg

[frank the alien]

Was genau macht Safari falsch?

Also gut, der Code sieht folgendermaßen aus:

#box1 {  
  
position:absolute; top:150px; left:120px;  
text-align:left;  
  
}  
  
#box1 a {  
  
color:#ffffff;  
display:block;  
font-family: Verdana, Arial, Helvetica, sans-serif;  
font-size: 14px;  
border:0px;  
  
}  
  
#box1 a:hover {  
  
display:block;  
  
}  
  
#box1 a span {  
  
display:none;  
  
}  
  
#box1 a:hover span {  
  
position:absolute; top:-50px; left:-90px;  
color:black;  
font-family: Verdana, Arial, Helvetica, sans-serif;  
font-size: 14px;  
background:#eeeeee;  
z-index:1;  
display:block;  
width:200px;  
padding:10px;  
border:1px solid black;  
  
}  
  
#box1 a span:hover { display:none; }

und im Body:

<div id="box1"><a href="#"><img src="selbereinfuegen.png" width="100" height="100" border="0" style="position:absolute; top:0px; left:0px; z-index:2"><span>Beispieltext.<br>Beispieltext.<br>Beispieltext.<br>Beispieltext.<br>Beispieltext.<br>Beispieltext.<br>Beispieltext.<br></span></a></div>

Nur mehr geeignetes png ansteuern, dann müsste das Beispiel gehen.

Safari unter Windows?

Nope. Safari 2.0.4 und Opera 9.20 im Mac, Firefox 3.6.3 und IE8 unter Windows.

Und nur Safari akzeptiert den "#box1 a span:hover" nicht. "a:hover span:hover" auch nicht übrigens.

[Malcolm Beck´s]

مرحبا

  

> #box1 a span:hover { display:none; }  

Du könntest versuchen, es mit Gewalt auszublenden.

#box1 a span:hover,  
#box1 span:hover {  
  display:none !important;  
}

Da ich keinen Mac besitze, kann ich das Problem leider nicht reproduzieren.

und im Body:

Am ende dieses Postinges füge ich ein Copy&Paste-Fertiges Bsp. ein. Die meisten hier helfen gerne, noch lieber helfen wir, wenn das Problem auf schnellstem wege nachvollziehbar ist.

Nope. Safari 2.0.4

Das ding ist ja auch schon ziemlich Alt, lohnt sich hier überhaupt der Aufwand für dieses Modell?

Und hier mal ein Bsp., wie ich das Problem angehen würde:

<!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><title>Info</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<style type="text/css">

#box1 {  
  position:absolute;  
  top:150px;  
  left:120px;  
}  
#box1 a {  
  display:block;  
}  
#box1 a span {  
  display:none;  
}  
#box1 a:hover span {  
  padding:10px;  
  position:absolute;  
  top:-50px;  
  left:-90px;  
  z-index:1;  
  background:#EEE;  
  display:block;  
  width:200px;  
}  
#box1 a span:hover,  
#box1 span:hover {  
  display:none !important;  
}  
#box1 img {  
  position:absolute;  
  top:0px;  
  left:0px;  
  z-index:2;  
  width:100px;  
  height:100px;  
  border:0 none;  
}

</style>  
</head>  
<body>  
  <div  id="box1">  
  <a href="#">  
  <img src="http://t3.gstatic.com/images?q=tbn:jpl3MFK_a1XBQM:http://img3s2.schaefer-shop.de/produktbild/magnet-symbol-pfeil-msde10009323ad1.jpg" />  
  <span>Beispieltext.  
  <br>Beispieltext.  
  <br>Beispieltext.  
  <br>Beispieltext.  
  <br>Beispieltext.  
  <br>Beispieltext.  
  <br>Beispieltext.  
  </span></a>  
  </div>  
</body>  
</html>

mfg

[frank the alien]

mfg

Geht nach wie vor nicht. Aber ich werds jetzt dabei belassen, wahrscheinlich hast du recht und der Browser ist einfach zu alt dafür.

Danke für die Hilfe.

[apsel]

Om nah hoo pez nyeetz, frank the alien!

Die Versionsnummern müssen für Mac und Win nicht übereinstimmen, aber der Browser lässt sich doch bestimmt updaten?!

Meist können die alten Browser :hover nur für a-Elemente

sonst hilft (ungetestet) im Markup ein zusätzliches Element (Aufschrei: zusätzliche Elemente aus Gestaltungsgründen sind böse)

Im Markup:

<div id="box">  
  <a href="#">INFOBOX  
    <span>  
      <a href="#">Lorem usw.</a>  
    </span>  
  </a>  
</div>

und im CSS
#box a span a:hover {display:hidden}

Matthias

[frank the alien]

Das zusätzliche <a> macht ganz komische Sachen, lässt den Lorem-Text schon im ungehoverten Zustand erscheinen, zB. Ich glaub das stellt die ganze Boxenstruktur auf den Kopf, gibt's das?

Ganz so alt dürfte der Browser nicht sein, zumindest img:hover versteht er problemlos.

Ich bin aber auch selber schuld. Auf dem Rechner wo der drauf ist, hab ich kein Internet, was bei den meisten Arbeitsprozessen auch ein Segen ist, aber dadurch ist das mit dem Updaten natürlich so eine Sache.

Wir müssen uns mit dem Problem auch nicht weiter herumschlagen, für mich wäre's nur interessant, ob die Funktion mit #box a span:hover bei einer späteren Safari-Version dann geht. Wenn wer 5min Zeit hat um das Beispiel von Malcolm Beck's zu copy-pasten, wäre mir schon geholfen.

Om nah hoo und alles.

[Malcolm Beck´s]

مرحبا

Wenn wer 5min Zeit hat um das Beispiel von Malcolm Beck's zu copy-pasten, wäre mir schon geholfen.

http://dj-tut.de/z_test/selfhtml/info

Safari 4.0.4 kriegt es unerwarteter Weise auch nicht auf die Kette.

mfg