XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   divs Überlagerung bei Hover-Funktion (http://xhtmlforum.de/showthread.php?t=72208)

Salai 26.07.2015 01:03

divs Überlagerung bei Hover-Funktion
 
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo zusammen,

ich habe ein Problem bei der Positionierung von hover-divs mittels CSS bzw. zwei Probleme. Leider hat mich die Forensuche mit 1000 Topics erschlagen und ich konnte bei den relevanten Fragen keine Antwort finden. Wenn die Sache also allgemein schon beantwortet wurde, mea culpa :)

Zur Sache:

Ich habe ein Bild als Hintergrund, auf welchem ich mit spans Text gelegt habe (Anhang Bild 1), hier beispielsweise "GENTRY" und "COMMONS". Über diesen Bildern liegt mit CSS ein Hover-div, das sich öffnen soll, wenn man darüber fährt:

Code:

.parlament {
width: 750px;
height: 700px;
position: relative;
background-image: url(images/info/parlament.png);
}

/*GENTRY*/
.gentry {
margin-top: 150px;
margin-right: 490px;
margin-bottom: 530px;
margin-left: 310px;
position: absolute;
background-repeat: no-repeat;
height: 200px;
width: 200px;
opacity: 1;
text-align: justify;
color: #363636;
font-family: Cinzel;
font-size: 20px;
}

.gentry:hover {
width: 350px;
height: 250px;
background-color: #fff;
transition: 1s;
font-family: tahoma;
font-size: 11px;
position: absolute;
text-align: justify;
overflow-x: hidden;
padding: 10px;
opacity: 1;
border-left: 25px solid #80d28b;
border-bottom: 8px solid #80d28b;
color: #363636;
}

Das funktioniert auch. Allerdings ist die Schrift von dem anderen Feld "COMMONS" in dem Hoverfeld von "GENTRY" noch zu sehen. Wie kann ich das ausblenden bzw. dafür sorgen, dass das Hoverfeld über dem Schriftzug liegt?

Und dann noch die Frage:

Das Feld entfaltete sich mit der linken oberen Ecke beim hovern an dem Schriftzug "GENTRY" nach rechts unten. Weil es dort dann aber teilweise vom Rand des gesamten divs abgeschnitten wird, würde ich es gerne nach beispielsweise rechts oben statt links unten ausklappen lassen. Ist das möglich?

Vielen Dank schon mal für die Hilfe.
Wenn weitere Informationen gebraucht werden, einfach sagen :)

Viele Grüße,
Salai


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019