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

:hover - finde meinen Fehler nicht

admin

admin

Administrator
Teammitglied
Moderator
Ich habe die folgende URL
Marktplatz - Aktuelle Ausschreibungen
auf der teste ich gerade Bootstrap 2.1

In der Menuzeile habe ich das Problem, dass das .caret hinter den Menus (z.B. Home) richtig mit Opacity 0.3 dargestellt wird, aber sobald ein :hover auf dem dropdown .li erfolgt eigentlich mit Opacity 1 angezeigt werden sollte. Das sollte dazu führen dass beim Hovern über dem Menu der kleine Pfeil etwas heller werden sollte. Klappt aber nicht. Wenn man ein Menu anklickt und aktiviert dann scheint der :hover Selektor zu greifen, aber nur auf dem aufgeklappten Menu. Bin da inzwischen am Verzweifeln. Hat da jemand eine Idee?

P.S.: Falls meine Beschreibung unverständlich war. Das Verhalten in der Menuzeile (Home / Webhosting / Server ...) sollte genau so sein wie auf der Startseite. Achtet bei der Interaktion mit den Menus auf die Farbe des kleinen Pfeils nach unten.
 
Opacity vererbt sich auf Kindelemente. Wenn du die Navbar auf 0.3 setzt, bekommen die darin liegenden Elemente beim Hovern kein 1.0. Ich würde rgba() nehmen und notfalls ein Fallback für den IE implemetieren.
 
Ich bekomme das Hovern trotzdem nicht hin ;(

Code: 
.dropdown:hover .caret{
    border-top-color: rgba(255,255,255,1);
    border-bottom-color: rgba(255,255,255,1);

Obiger Snippet sollte getriggert werden wenn über den DIV dropdown gehovert wird und dann die Opacity via rgba auf 1 setzen - tut es aber nicht.
 
Code: 
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret { opacity: 0.3; }

.navbar .nav li.dropdown:hover .dropdown-toggle .caret, .navbar .nav li.dropdown.open:hover .caret { opacity: 1; }

Sollte doch gehen? Oo

Btw. wird die Schreibweise li.dropdown.open vom IE erst ab der 9 unterstützt. Im IE sollte es auch angesichts von opacity ohnehin anders dargestellt werden.
 
Das Eltern-DIV sollte auch in rgba() definiert sein.

Sofern die #box eine opacity von 0.4 erhält, ändert sich dieser Wert in den Kindelementen nicht mehr, auch wenn man #box_content:hover wahlweise mit opacity 1.0 oder rgba(0,0,0,1) anlegt.

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Foobar</title>
<style type="text/css">
* {
    position: relative;
}
#box {
    width: 300px;
    height: 100px;
    top: 100px;
    left: 50px;
    background: #000;
    opacity: 0.4;
}

#box_content {
    width: 80px;
    height: 60px;
    top: 20px;
    left: 20px;
    border: 1px solid white;
}

#box_content:hover {
    opacity: 1;
    background: rgba(0,0,0,1);
}
</style>
</head>
<body>
    <div id="box">
        <div id="box_content"></div>
    </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben