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

Hovern ohne schieben

R

ron32

Neues Mitglied
Hallo,

ich habe folgende Hoverfunktion :

HTML: 
<style type="text/css"> div.test { height: 20px; width: 200;overflow: hidden; border: 1px solid #FFFFFF; } div.test:hover 
{ height: 200px; width: 800; border: 0px solid #FFFFFF; }

</style>

<div class="test">Profil<br> <br> 

         ... darin sind mehrere Texte und Fotos ...

<br> </div>

Frage : Ich hätte es gerne dass beim aufklappen die nachfolgende Elemente nicht wie üblich vorgeschoben werden sondern einfach überdeckt. Was müsste ich hier ändern ?

vielen Dank
mfg
ron
 
Ja, mit z-index habe ich auch schon versucht. Einzel geht das - nur bekam ich diese Funktion nicht vernünftig in meine Hoverfunktion eingebaut. Müsste doch aber irgendwie gehen -das vernünftig einzubauen- ohne die Code oben großartig verändern zu müssen, oder ? Sorry, ich bin in HTML nicht so gut bewandt und bräuchte hier etwas Hilfe.

mfg
 
Mit deinem Code-Schnippsel oben wird das nicht funktionieren. Da muss zunächst der HTML-Code weiter unterteilt werden. Die Lösung ist aber in jedem Fall CSS nicht HTML, weshalb ich das Topic mal dorthin verschoben habe. Ein Tipp für deine Suche: schau dir mal an wie Aufklappmenüs mit purem CSS funktionieren. Da gibt es viele Beispiele.
 
Hi,

also wenn ich nicht ganz auf dem Schlauch stehe, willst du ja, dass beim Hover dein Test div Größer wird und somit die anderen untenstehenden oder nebenstehenden Divs einfach überdeckt.
Dann würde ich doch einfach das Div generell absolute definieren "position:absolute;" Dann verschiebt das auch die anderen Divs nicht mehr.

Damit die anderen divs nicht nach oben rücken, da bei absoluter Positionierung diese sich ja nicht mehr am test-Div ausrichten musst du um das Test div dann einfach ein Div mit: Höhe 20px und Breite 200, sowie "position:relative". Dann natürlich dem test-Div einen z-Index zuweisen. Und den zu überlappenden Divs einen niedrigeren Z-Index.

Sollte so doch funktionieren, ansonsten poste doch mal den geänderten ganzen Code.
 
@Marv: Ja, genauso möchte ich es. Ich habe schon mit absoluter Positionierung und index-z herum probiert. Obwohl ich mich nicht so gut auskenne, kam trotdem wohl auf gut Glück etwas dabei heraus - ob das aber trotzdem so ok ist ?? Könntest du mir den Code bitte so umschreiben wie du es meinst oder machen würdest?

Was ich bisher probiert habe (sorry, bin Laie) :

<style type="text/css">
div.test1 { position:absolute; top: 0px; bottom: 400px;display: inline; height: 20px; width: 200px;overflow: hidden; border: 0px solid #000000;}
div.test1:hover { display:block; position: absolute; top: 0px; bottom: 400px;height: 200px; width: 90%;border: 1px solid #000000; }
</style>

mfg
ron
 
Zuletzt bearbeitet:
Hi, sieht doch gar nicht so verkehrt aus, du hättest noch z-index vergeben sollen und den zu überlappenden Elementen einen niedrigeren z-index, als deine hover-Box.
Es reicht übrigens auch im css "".test" statt "div.test" zu schreiben, es sei denn du hast an einer anderen stelle noch ".test", in einem anderen elemente als einen Div Container.
Außerdem hättest du zusätzlich zum CSS noch deinen HTML Code posten könne.

habe hier aber mal eine kleine Beispieldatei geschrieben:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>Marv Beispiel Seite</title>
<style type="text/css">
div.test1 { 
    z-index:10;
    background:red;
    position:absolute;
    top: 0px; 
    bottom: 400px;
    display: inline; 
    height: 20px; 
    width: 200px;
    overflow: hidden;
    border: 0px solid #000000;
 }
    div.test1:hover {
        display:block;
        position: absolute;
        top: 0px; 
        bottom: 400px;
        height: 200px;
        width: 90%;
        border: 1px solid #000000;
    }
    
.test2    {
    z-index:5;
    width:300px;
    height:300px;
    background:fuchsia;
}

.test1-wrapper    {
    height:20px;
    position:relative;
}
</style>
</head>

<body>

<div class="test1-wrapper"> <!-- Der äußere Container sorgt für den normalen Abstand zwischen test und test 2 -->
    <div class="test1">
        Profil<br /> <br />... darin sind mehrere Texte und Fotos ...
        <br /> 
    </div>
</div>

<div class="test2">
    Dieser Div wird nicht durch das oben, sich ausklappende Profil-Div verschoben.
</div>

</body>
</html>

Der Hover-Effekt sollte funktionieren, und der untere Div container überdeckt werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben