DIV herovrrufen bei Mouseover

[matibaski]

Moin!
Habe mal folgendes:
Ich mache für meinen Auftraggeber eine Webseite. Er möchte bei der Navigation einen versteckten Div-Container haben. Und wenn man auf Extras geht,dann soll der versteckte erscheinen.

Ich dachte so:
stylesheet.css

/* Versteckter Container */
.box_sub_extra{
position: absolute;
top: 341px;
width: 158px;
height: 31px;
left: 207px;
text-align: left;
border: 1px;
border-color: #000000;
border-collapse: collapse;
visibility: hidden;
}

/* Unversteckter container. Ich dachte mit a:hover */
.box_sub_extra a:hover{
position: absolute;
top: 341px;
width: 158px;
height: 31px;
left: 207px;
text-align: left;
border: 1px;
border-color: #000000;
border-collapse: collapse;
visibility: visible;
}

Hier ist in der index.php

...
  <tr>
  <td><a href="#">Extras</a></td>
 </tr>
</table>
</div>
<div class="box_sub_extra">
<table cellpadding="2" cellspacing="0" border="0" width="100%" height="100%" style="background-color:#00CC00;">
 <tr>
  <td style="font-size:10pt;">RollOver Test</td>
 </tr>
</table>
</div>

Doch es funzt nicht. :(

 

[matcho]

Teste mal folgendes:

        #box_sub_extra{
        position: absolute;
        top: 341px;
        width: 158px;
        height: 31px;
        left: 207px;
        text-align: left;
        border:1px solid black;}

        #box_sub_extra div {display:none;}

        #box_sub_extra:hover div {
        display:block;
        position: absolute;
        top: 341px;
        width: 120px;
        height: 50px;
        left: 400px;
        border:1px solid black;
        padding: 5px}

und im quellcode dann:

<div id="box_sub_extra"><a href="#">Rollover mich</a>
    <div>Hallo ich war grad noch versteckt :) </div>
    </div>

müsste klappen?? einfach an eigene bedürfnisse anpassen :lol:

 

[matibaski]

Danke.
Nur da gibts ein Problem
Meine Navigation sieht wie folgt aus:

<div class="box_navigation">
<table width="200" height="200" border="0" cellspacing="0" cellpadding="2" style="background-color:#009900">
 <tr>
  <td><span class="Stil2">Home</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Trainer</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Team</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Training</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Anlässe</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Gästebuch</span></td>
 </tr>
  <tr>
  <td name="rollover"><a href="#" id="box_sub_extra">Extras</a></td>
 </tr>
</table>
</div>

Das heisst, es ist in einer Tabelle.
Ich habe den Code bei Versteckt-Status umgeändert.
So etwa:

#box_sub_extra{
text-align: left;
}

#box_sub_extra div {
display:none;
}

#box_sub_extra:hover div {
display:block;
position: absolute;
top: 200px;
width: 120px;
height: 50px;
left: 300px;
border:1px solid black;
padding: 5px
}

Doch das scheint nicht zu wirken. :(

MfG, matibaski

 

[matcho]

kommt ganz drauf an, wo und wie das div erscheinen soll
einfach bissl rumspielen und testen

#box_sub_extra{
        color:red;
        }

        #box_sub_extra div {display:none;}

        #box_sub_extra:hover div {
        display:block;
        color: #000000;
        position: absolute;
        top: 200px;
        width: 120px;
        height: 50px;
        left: 300px;
        border:3px dashed black;
        padding: 5px}

quellcode:

 <table width="200" height="200" border="0" cellspacing="0" cellpadding="2" style="background-color:#009900">
 <tr>
  <td><span class="Stil2">Home</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Trainer</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Team</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Training</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Anlässe</span></td>
 </tr>
  <tr>
  <td><span class="Stil2">Gästebuch</span></td>
 </tr>
  <tr>
  <td id="box_sub_extra"><a href="#">Extras</a><div>Link</div> </td>

 </tr>
</table>

 

[matibaski]

Danke!
Hat geklappt.
Habe vorher eigentlich nie Div's formatiert. Also sehr selten, da ich einegtnlich ein Tabellen-Typ bin. Aber der Kunde bekommt, was er will. ;)
Sonst bekomme ich kein Geld. :mrgreen: