• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

<div> hovern

Status
Für weitere Antworten geschlossen.
A

assmaje

Neues Mitglied
Kann ich ein <div> Element so hovern, dass es beim Drüberfahren mit der Maus zum Beispiel orange wird?
Kann man es überhaupt hovern? Und wenn ja, wie? ;ugl

Hoffe ihr könnt mir helfen.
 
Hier mal ein Beispiel-CSS-Code, wie sowas aussehen könnte:

Code: 
#content {
 position:absolute;
 display: block;
height: 500px;
width: 75%;
font-weight: bold;
color: #000000;
border: 2px dotted gray;
margin-right:25px;
right:0px;
top:50px;
overflow: auto;
z-index=1000;
}

#content:hover {
background: #ff0000;
}

Aber irgendwie befürchte ich, dass alte IE-Versionen da nich mitmachen...
 
Funktioniert nicht...
Ich benutze Safari, hab's aber auch mit Firefox getestet. Und IE kann eh nichts.

Code: 
<!-- Beginn infoleft --!>

  <div id="[COLOR="Red"]infoleft[/COLOR]"; style="display:block; text-align:center; width:20px; height:150px; position:absolute; left:0px; top:29px;
  background-color:#FFFFFF; border-style:solid; border-width:1px;
  border-left-color:transparent; border-right-color:#999999; border-top-color:#999999; border-bottom-color:#999999">

    <span style="font-size:12px; color:#000000">
      <a class="none" href="#"; onclick="document.getElementById('info').style.display='block'">[»]</a><br>
    </span>

  </div>

<!-- Ende infoleft --!>
<!-- Beginn info --!>

  <div id="info"; style="display:none; text-align:left; width:250px; height:150px; position:absolute; left:0px; top:29px;
  background-color:#FFFFFF; border-style:solid; border-width:1px;
  border-left-color:transparent; border-right-color:#999999; border-top-color:#999999; border-bottom-color:#999999">

  <div style="margin-left:20px; margin-right:20px; margin-top:20px">
  <span style="font-size:12px; color:#000000">

    <h1>Wichtig!</h1>

    Endlich haben wir eine Infobox!<br>
    Doch dankt nicht mir, dankt CSS! :-)<br><br>

    <a class="none" href="#"; onclick="document.getElementById('info').style.display='none'">[Schließen]</a>

  </span>
  </div>
  </div>

<!-- Ende info --!>

Und in meinem Style-Sheet:

Code: 
#[COLOR="Red"]infoleft[/COLOR]:hover { background:#FF8C00 }
 
Ja, bei mir funzt es auch, nur nicht auf meiner Webseite... :sad: (hab des ; jetzt gelöscht, hat sich nichts geändert)
Obwohl sie nach W3C korrekt ist. ._.
 
Keine Ahnung, obs was hilft, aber mach bei deinem Hover-Code mal den ; nach der Farbangabe hin...

Code: 
#[COLOR=Red]infoleft[/COLOR]:hover { background:#FF8C00[COLOR=Lime];[/COLOR] }
 
Du überschreibst :hover in dem du id="infoleft" mit style direkt in das Element schreibst.
Das Semikolon (<div id="infoleft";......) muss weg.

css
Code: 
#infoleft {
 display:block;
 text-align:center;
 width:20px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#999999;
 border-top-color:#999999;
 border-bottom-color:#999999;
}

#infoleft:hover {
 background-color:#FF8C00;
 }
Internet Explorer unter Vers7 wenden :hover nur auf <a> an.
Wenn außer dem <a> Keine weiteren Inhalte in das <div> sollen, würde ich den style auf <a> anwenden.
So wie es in einem Beispiel steht ist <div> und <span> überflüssig.
 
Zuletzt bearbeitet:
Danke, funktioniert (sogar im IE)!! :-D

Allerdings hatte ich das ; schon vorher weg, erst als ich den style-Code in mein Style-Sheet eingefügt hatte (so wie in deinem Post), hat es geklappt... Merkwürdig. ;ugl Aber warum überflüssig? Das <div> ist dringend notwendig...
 
Zuletzt bearbeitet:
assmaje schrieb:
Danke, funktioniert (sogar im IE)!! :-D

Allerdings hatte ich das ; schon vorher weg, erst als ich den style-Code in mein Style-Sheet eingefügt hatte (so wie in deinem Post), hat es geklappt... Merkwürdig. ;ugl Aber warum überflüssig? Das <div> ist dringend notwendig...
Zum Vergrößern anklicken....

Weil die style-Anweisungen im Element die pseudoklassen aus dem head-bereich überschreiben. Damit gibt es :hover nicht mehr.

So wie ich es geschrieben habe funktioniert es nicht im IE5 und IE6.
Mit weniger Code dürfte es aber auch in den Asbach-Browsern gehen.
Ein Ansatz:
html
Code: 
<div id="info">
<h1>Wichtig!</h1>
<p>
Endlich haben wir eine Infobox!
Doch dankt nicht mir, dankt CSS! :-)
</p>
<a class="none" href="#" onclick="document.getElementById('info').style.display='none'">[Schließen]</a>
</div>
css
Code: 
#infoleft {
 display:block;
 text-align:center;
 width:20px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#999999;
 border-top-color:#999999;
 border-bottom-color:#999999;
}

#infoleft:hover {
 background-color:#FF8C00;
 }

#info {
display: none;
 text-align:left;
 width:250px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#999999;
 border-top-color:#999999;
 border-bottom-color:#999999;
color:#000000;
font-size:12px;
padding: 20px 20px 0px 20px;
}
So wird :hover auf <a> angewendet.
Ist etwas lieblos zusammgetippt aber dürfte auch im IE5 funktionieren.
Der Code ist ohne die ganzen divs auch übersichtlicher.
Das css lässt sich sicher auch noch um einige Zeilen abspecken.

(h1 mit <span> umschließen ist auch nicht erlaubt.)
 
neuroleptika schrieb:
Weil die style-Anweisungen im Element die pseudoklassen aus dem head-bereich überschreiben. Damit gibt es :hover nicht mehr.

So wie ich es geschrieben habe funktioniert es nicht im IE5 und IE6.
Mit weniger Code dürfte es aber auch in den Asbach-Browsern gehen.
Ein Ansatz:
html
Code: 
<div id="info">
<h1>Wichtig!</h1>
<p>
Endlich haben wir eine Infobox!
Doch dankt nicht mir, dankt CSS! :-)
</p>
<a class="none" href="#" onclick="document.getElementById('info').style.display='none'">[Schließen]</a>
</div>
css
Code: 
#infoleft {
 display:block;
 text-align:center;
 width:20px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#999999;
 border-top-color:#999999;
 border-bottom-color:#999999;
}

#infoleft:hover {
 background-color:#FF8C00;
 }

#info {
display: none;
 text-align:left;
 width:250px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#999999;
 border-top-color:#999999;
 border-bottom-color:#999999;
color:#000000;
font-size:12px;
padding: 20px 20px 0px 20px;
}
So wird :hover auf <a> angewendet.
Ist etwas lieblos zusammgetippt aber dürfte auch im IE5 funktionieren.
Der Code ist ohne die ganzen divs auch übersichtlicher.
Das css lässt sich sicher auch noch um einige Zeilen abspecken.

(h1 mit <span> umschließen ist auch nicht erlaubt.)
Zum Vergrößern anklicken....
Danke!

Alles im Style-Sheet, allerdings habe ich jetzt das ganze (leere) <div> verlinkt.
Im IE 7 funktioniert alles richtig (eigentlich das Gegenteil, dafür aber das mit dem hover).

HTML:
Code: 
<a class="none" href="#"; onclick="document.getElementById('info').style.display='block'">
  <div id="infoleft"></div>
</a>

<!-- Beginn info --!>

<div id="info">
  <div style="margin-left:20px; margin-right:20px; margin-top:20px">

    <h1>Wichtig!</h1>

    <span style="font-size:12px; color:#000000">

      Endlich haben wir eine Infobox!<br>
      Doch dankt nicht mir, dankt CSS! :-)<br><br>

      <a class="none" href="#"; onclick="document.getElementById('info').style.display='none'">[Schließen]</a>

    </span>

  </div>
</div>

<!-- Ende info --!>

CSS:
Code: 
body {
 background-image:url(BG.png);
 margin:0px;
 padding:0px;
 font-family:Arial;
 text-align:center;
}

a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:focus { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }

.none:link { color:#000000; text-decoration:none; }
.none:visited { color:#000000; text-decoration:none; }
.none:focus { color:#000000;text-decoration:none; }
.none:active { color:#FF8C00; text-decoration:none; }
.none:hover { color:#FF8C00; text-decoration:none; }

h1 { font-size:12px;
     font-weight:bold;
     color:#FF8C00; }

#infoleft {
 display:block;
 text-align:center;
 width:10px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#000000;
 border-top-color:#000000;
 border-bottom-color:#000000;
}

#infoleft:hover {
 background-color:#FF8C00;
 }

#info {
 display:none;
 text-align:left;
 width:250px;
 height:150px;
 position:absolute;
 left:0px;
 top:29px;
 background-color:#FFFFFF;
 border-style:solid;
 border-width:1px;
 border-left-color:transparent;
 border-right-color:#000000;
 border-top-color:#000000;
 border-bottom-color:#000000;
}

.Leerzeichen { margin-left:40px }
 
assmaje schrieb:
Danke!

Alles im Style-Sheet, allerdings habe ich jetzt das ganze (leere) <div> verlinkt.
Im IE 7 funktioniert alles richtig (eigentlich das Gegenteil, dafür aber das mit dem hover).
Zum Vergrößern anklicken....
<div> im <a> ist auch nicht erlaubt. Du könntest <div> um <a> oder <a> um <span> benützen.
Aber eigentlich meinte ich es ganz anders:
Code: 
<a id="infoleft" href="#" onclick="document.getElementById('info').style.display='block'">[»]</a>

<div id="info">
   <h1>Wichtig!</h1>
    <p>
    Endlich haben wir eine Infobox!
    Doch dankt nicht mir, dankt CSS! :-)
    </p>
    <a class="none" href="#" onclick="document.getElementById('info').style.display='none'">[Schließen]</a>
  </div>
<a> lässt sich genauso stylen wie jedes andere Element auch.
Ich habe nur vergessen die Zeile mit dem <a> in den html-code zu schreiben.
Zusammen mit meinem Stylebeispiel vom letzten Post sollte es so funktionieren.
Mit <span> und <div> würde ich schon der Übersichtlichkeit wegen sparsam umgehen.


(Der IE7 hat kein Problem mit :hover auf <div>. Es geht nur um ältere Versionen.)
 
Zuletzt bearbeitet:
neuroleptika schrieb:
<div> im <a> ist auch nicht erlaubt. Du könntest <div> um <a> oder <a> um <span> benützen.
Aber eigentlich meinte ich es ganz anders:
Code: 
<a id="infoleft" href="#" onclick="document.getElementById('info').style.display='block'">[»]</a>

<div id="info">
   <h1>Wichtig!</h1>
    <p>
    Endlich haben wir eine Infobox!
    Doch dankt nicht mir, dankt CSS! :-)
    </p>
    <a class="none" href="#" onclick="document.getElementById('info').style.display='none'">[Schließen]</a>
  </div>
<a> lässt sich genauso stylen wie jedes andere Element auch.
Ich habe nur vergessen die Zeile mit dem <a> in den html-code zu schreiben.
Zusammen mit meinem Stylebeispiel vom letzten Post sollte es so funktionieren.
Mit <span> und <div> würde ich schon der Übersichtlichkeit wegen sparsam umgehen.


(Der IE7 hat kein Problem mit :hover auf <div>. Es geht nur um ältere Versionen.)
Zum Vergrößern anklicken....
Schon, aber ich hatte mich dazu umentschieden das ganze <div> zu verlinken, was nur mit <a><div></div></a> funktioniert (oder?). :roll:
Softmedia (auf der linken Seite, bitte kein Design + Inhalt bewerten)

Danke nochmal für deine Hilfe! :grin:
 
Zuletzt bearbeitet:
assmaje schrieb:
Schon, aber ich hatte mich dazu umentschieden das ganze <div> zu verlinken, was nur mit <a><div></div></a> funktioniert (oder?). ...
Zum Vergrößern anklicken....
Wenn dann <a><span></span></a>.
Wenn du <span> die id für das Style gibst wird der hover aber erst ab IE7 funktionieren.

Ich habe es mal so hochgeladen wie ich so etwas vielleicht machen würde:
Hover Infoleiste

Ich habe className anstelle von style.display gewählt und die Infoleiste mit position: absolute aus dem Sichtbereich geschoben.
Ob ich das so lassen würde weiß ich selber nicht so genau.

Für die width-Angaben habe ich em verwendet (sonst funktioniert das ganze nur in einer Schriftgröße richtig).

Jedenfalls funktioniert es so ab IE5 und hat einen sparsamen html-code.
Das <span> oder <div> macht in deiner Variante nichts anderes als ältere Internet Explorer vom :hover-Effekt ausschließen.

Letztendlich musst du wissen wie du es willst.

Nachtrag:
Der hover funktioniert doch erst ab IE5.5.
IE5 hat irgendwie Probleme mit der Kombination position: absolute und a:hover.
Einen css-Hack kenne ich dafür nicht.
 
Zuletzt bearbeitet:
Eigentlich alles egal...
Es hat so gut wie jeder IE 7/6 (bekommt man jeweils durch Updates/Service Packs [so weit ich weiß]), und wer nur IE 5/5.5 hat, kann vermutlich nicht mal ins Internet, und wenn doch, dann wahrscheinlich nur mit nem 56KB-Modem...

Mal sehen, vielleicht werde ich noch das ein oder andere ändern. :)

Danke noch mal!! :grin:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben