XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Dropdown - Hover-Effekt verschwindet (http://xhtmlforum.de/showthread.php?t=64380)

narjin 19.04.2011 13:06

Dropdown - Hover-Effekt verschwindet
 
Liebe Communtiy,

ich hab eine Site mit einem Menüpunkt "Login" der ich ein Dropdownmenü gegeben habe um dort das Login-Forumlar, usw. zu hinterlegen.

Nun hat der Menüpunkt "Login" einen Hover-Effekt. Dieser verschwindet sobald ich aus dem Menüpunkt in die Dropdown-Box fahre.
Ich möchte aber das er bleibt.

Mein CSS:
Code:

.drop a.login-link{
    position:absolute;
    top:1px;
    right: 181px;
    text-transform:none;
    z-index:10;
    font-size: 14px;
    display:block;
    color:#47647b;
    cursor:pointer;
    padding:14px 10px 14px 17px;
}
.drop a.login-link:hover {
    background:url(../images/bg-nav-l.png) no-repeat;
    text-decoration: none;
}
.drop:hover .drop-holder {
    display: block;
}
.drop-holder{
    display: none;
    position: absolute;
    width: 575px;
    height: 225px;
    top: 37px;
    background-color: #fff;
    z-index: 99;
    margin: 0 28px;
    padding: 58px 90px 26px 66px;
}

Mein HTML:
HTML-Code:

<div class="drop">
                        <a href="fileadmin/templates/html/startseite/login.html" class="login-link" style="color: #A8101B;">
                            <strong>LOGIN</strong>
                        </a>

                        <div class="drop-holder">
                            <div id="login"><div class="tx-felogin-pi1">
               
<div class="login-form">
        <div class="title-box">
                <h1>Logout</h1>
        </div>
        <p></p>
        <form action="willkommen-login.html" method="post" class=" logout">

                <fieldset>
                        <input type="hidden" name="logintype" value="logout" />
                        <input type="hidden" name="pid" value="178" />
                        <div class="login-field">
                                <p>Das ist Ihr aktueller Status:</p>
                                <p>Benutzername:</p> <div class="username"><p>test</p></div>
                        </div>

                        <input type="submit" name="submit" class="btn-submit btn-login" value="Logout" />
                </fieldset>
        </form>
</div>

        </div>
        </div>

Ich danke für jede Hilfe.

Mit freundlichen Früßen,

narjin

Borsti 20.04.2011 19:44

Ist eigentlich ganz klar, dass der Hover-Effekt verschwindet ;)

Dein Hover-Effekt gilt nur für folgende Zeile:

HTML-Code:

<a href="fileadmin/templates/html/startseite/login.html" class="login-link" style="color: #A8101B;">
<strong>LOGIN</strong>
</a>

Sobald du dich also mit der Maus in dem <a>-Element befindest, wird der Hintergrund von dem Element mit :hover gesetzt.

Navigierst du dann mit der Maus zum Login, dann bist du nicht mehr im <a>-Element und deswegen gibt's auch kein hover-Effekt mehr.

Ist eh nicht ganz konform, was du machst, da in der Zeile
Code:

.drop:hover .drop-holder {
    display: block;
}

glaube ich nicht von allen Browsern unterstützt wird.

Normal werden solche Sachen mit Javascript umgesetzt, mit einfachen CSS wirst du an der Stelle auf der Nase landen ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:12 Uhr.

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

© Dirk H. 2003 - 2023