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

Frage zu hover effekt?

F

Fr3ddy

Mitglied
Hi, ich möchte, dass wenn ich mit der maus über den h2 tag gehe, das div mit der class .detail angezeigt wird, wie kann ich das bewerkstelligen?

PHP: 
<div class="mitarbeiter">
<h2>Mitarbeiter 1</h2>
<div class="detail">
Telefon
Email
</div>
</div>
 
Code: 
h2{
   font-size: 2em;
   margin: 0;
}

.detail{
   height: 2em;
   overflow: hidden;
}

.detail:hover{
   height:auto;
}

HTML: 
<div class="mitarbeiter">
   <div class="detail">
      <h2>Mitarbeiter 1</h2>
      Telefon
      Email
   </div>
</div>
so sollte es gehen (ungetestet)
 
Hi, leider verschwindet jetzt alles

Vielleicht hab ich mich auch falsch ausgedrückt.

Es steht z.b. Mitarbeiter 1 da (wird aus Datenbank gelesen + telefonnummer und emailadresse)
und wenn ich mit der maus über diesen mitarbeiter gehe, werden mir auch dann die telefonnummer und email adresse angezeigt.
 
Keine Ahnung was du gemacht hast, dass bei dir alles verschwindet.
Guckst du HIER

//EDIT: Na klar. Jetzt ist natürlich gerade mein Server down! Sorry.
Vertrau mir. Es funktioniert so.
Zeig mal was du gemacht hast.
Vielleicht sehen wir deinen Fehler.

//EDIT2: Geht wieder...
 
Zuletzt bearbeitet:
Hier mein code:

PHP: 
            <div class="mitarbeiter">
            <div class="detail">
            <h2><?php echo $vcr->getFirstname(), $vcr->getLastname();?></h2>
            <?php
            echo '<a href="#">'.$vcr->getEmail().'</a>';
            echo $vcr->getDepartment().'<br>';
            echo '<object data="data:image/png;base64, '.$vcr->getPhoto().'"</object>';
            echo '</div>';
            echo '</div>';

HTML: 
.detail{
    height: 2em;
    overflow: hidden;
}
.detail:hover{
    height:auto;
}
h2{
   font-size: 2em;
}
 
Hmm.
Sollte so funktionieren (siehe mein Beispiel)
Hast du das irgendwo schon Online, dass man sich das mal in der Gesamtheit ansehen kann?
 
Du willst den Hovereffekt ja bei Überfahren der Überschrift haben.
Das setzt voraus, dass Die überschrift innerhalb des auszublendenden Elementes ist.

display:none würde bewirken, dass
a. nichts mehr zu sehen ist, also auch nicht die Überschrift, und
b. nichts da ist wo du mit der Maus drüberfahren könntest um einen Effekt zu erzielen

So wie ich es dir gezeigt habe, ist es schon richtig. Du müsstest nur herausfinden, warum es teilweise nicht funktioniert.
Die meiste Ursache für Funktion im einen, aber nicht im anderen browser, ist, dass irgendwo ein Tagging-Fehler versteckt ist (nicht geschlossener Container etc.) bei dem der eine Browser "flexibel" genug ist, den Fehler auszubügeln, der Andere aber stur garnichts macht.

Validiere mal deinen Code.
Möglicherweise tut sich da der fehler auf.
 
Sorry, aber das kann ich gerade nicht nachvollziehen.
Warum möchtest du unbedingt absolut positionieren? o.O
ich sehe da bei drei Elementen im Container keine Notwändigkeit...
 
Ich gestalte gerade einen raum plan und ich will eine übersicht der räume, mit den jewiligen namen drin, und wenn ich mit der maus über einen namen gehe, sollen rechts vom namen die details zu der person erscheinen.

Denn wenn ich es so mache wie du, verschieben sich ja die namen nach unten, nur die namen sollen an ihrer festen position bleiben.
 
Eigentlich nicht.
Wenn du das umschließende Element .mitarbeiter Absolut positionierst, positionierst du alle Inhalte, die sich darin befinden ja mit.

Streng genommen ist der Container .details sogar überflüssig wenn du die Hovereigenschaften auf .mitarbeiter legst.
 
Hier noch einmal der code:

PHP: 
.mitarbeiter{
    position:relative;
}
h2{
   font-size: 12px;
   color:#000;
   font-family:arial;
}

.detail{
    width:130px;
    background-color:#999;
    color:#FFF;
    -moz-border-radius:10px;
    font-family:arial;
    font-size:9px;
    padding:10px;
    overflow:hidden;
    position:absolute;
    top:0px;
    left:110px;
}
.mitarbeiter_raum{
    width:200px;
    height:100px;
    float:left;
    margin:10px;
}

HTML: 
<div class="mitarbeiter_raum">
                    <div class="mitarbeiter">
                        <h2>Mitarbeiter 1</h2>
                        <div class="detail">
                            Telefon<br/>
                            Email                            
                        </div>
                    </div>
                    <div class="mitarbeiter">
                        <h2>Mitarbeiter 2</h2>
                        <div class="detail">
                            Telefon<br/>
                            Email                            
                        </div>
                    </div>
                    <div class="mitarbeiter">
                        <h2>Mitarbeiter 2</h2>
                        <div class="detail">
                            Telefon<br/>
                            Email                            
                        </div>
                    </div>
            </div>

Wie gesagt, ich möchte, dass die detail boxen erst dann sichtbar sind, wenn man über den jeweiligen mitarbeiter hovert.
 
Code: 
.mitarbeiter h2{
   font-size: 12px;
   color:#000;
   font-family:arial;
}

.mitarbeiter .detail{
    width:130px;
    background-color:#999;
    color:#FFF;
    -moz-border-radius:10px;
    font-family:arial;
    font-size:9px;
    padding:10px;
    display: none;
}

.mitarbeiter:hover .detail { display: block; }

.mitarbeiter_raum{
    width:200px;
    height:100px;
    float:left;
    margin:10px;
}

So würde der hover-Effekt entstehen sobald die Maus eine Mitarbeiter-Box berüht. Das geht in allen Browsern außer IE6 und älter.

Wenn Du möchtest, dass der Effekt nur bei Berührung des <h2> wirkt, musst Du JavaScript verwenden. JavaScript wäre btw. auch für ältere Browser die einzige Möglichkeit.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben