Übergeordnetes Menüelement hervorgehoben lassen, nachdem der Mauszeiger über das Untermenü bewegt wurde (HTML/CSS/Jquery)

Lesezeit: 3 Minuten

Ich habe ein Menü mit der Möglichkeit, dass einige Menüpunkte Unterpunkte haben. Eigentlich ganz einfach. Ich möchte erreichen, dass beim Überfahren des Untermenüs auch der entsprechende (übergeordnete) Menüpunkt hervorgehoben wird. Dies passiert nie, denn sobald die Maus das Menüelement verlässt und über das Untermenü gelangt, gestaltet der Browser es in seinem Standardstil. Jede Hilfe geschätzt! Danke vielmals!

Menü-HTML:

<div id="top_navigation">
        <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a>
                <ul class="submenu">
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li class="selected_menu_item"><a href="#">sub3</a></li>
                </ul>
            </li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
        </ul>
    </div>

CSS:

#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 23px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 312px;
    height: 64px;
    line-height: 64px;
    font-size: 20px;
    list-style: none;
}
#top_navigation ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #eb1f10;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}
#top_navigation li li {
    height: 42px;
    line-height: 42px;
    border-top: #eb1f10 1px solid;
}

JS/Jquery:

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');
        },
        function() {
            $('ul', this).slideUp('fast');
        }
    );
});

Beispiel finden Sie hier: http://jsfiddle.net/qguTz/

Oh, jetzt weiß ich nicht, wie mir das nicht früher eingefallen ist … Ich werde darauf antworten:

Es reicht aus, dies zu tauschen:

#top_navigation ul li a:hover {
    background-color: #eb1f10;
    color: #FFF;
}

dafür:

#top_navigation ul li:hover > a {
    background-color: #eb1f10;
    color: #FFF;
}

  • Haha! Einfach im Konzept, aber obskur genug, dass es eine Sekunde dauert, darüber nachzudenken 🙂 Gut gespielt, Sir, Sie haben mir etwas Zeit gespart!

    – Jeff Clark

    22. August 2014 um 21:26 Uhr


  • Ich liebe diese Antwort und versuche seit einiger Zeit, sie mit JS zum Laufen zu bringen. so eine hilfe

    – Eolis

    2. März 2015 um 22:36 Uhr

  • Vielen Dank – das hat mir ein bisschen mehr über die Verwendung von Selektoren beigebracht!

    – Gerard ONeill

    2. Juni 2015 um 20:20 Uhr

  • Wow, ich hatte genau das gleiche Problem. Du triffst den Nagel auf den Kopf! Dankeschön!

    – AVI-Entwickler

    18. Juni 2015 um 22:15 Uhr

  • Was ist mit einem 3-Ebenen-Menü wie hier, stackoverflow.com/questions/35300274/…

    – Si8

    10. Februar 2016 um 16:40 Uhr

Um das zu erreichen, benötigen Sie zwei kleine Modifikationen.

Das erste ist das CSS. Ich habe einer bereits vorhandenen Stildeklaration einen Selektor hinzugefügt:

#top_navigation ul li a:hover, #top_navigation ul li a.hovered {
    background-color: #eb1f10;
    color: #FFF;
}

Dann habe ich das CSS geändert, um diese Klasse hinzuzufügen:

$nav.hover(
    function() {
        $(this).children('a').addClass('hovered')
        $('ul', this).stop(true, true).slideDown('fast');
    },
    function() {
        $(this).children('a').removeClass('hovered')
        $('ul', this).slideUp('fast');
    }
);

Dann hat alles geklappt!
http://jsfiddle.net/qguTz/6/

  • Vielen Dank, das sieht auch nach einer guten Lösung aus!

    – Fygo

    28. Mai 2013 um 23:08 Uhr

http://jsfiddle.net/qguTz/10/

$nav.hover(
    function() {
        $('ul', this).stop(true, true).slideDown('fast');

        $('a',this).first().css({"background-color":"#eb1f10", "color":"#FFF"});
    },
    function() {

        $('ul', this).slideUp('fast');
       $('a',this).first().css({"background-color":"#FFF", "color":"#eb1f10"});
    }

  • stackoverflow.com/questions/35300274/… Bitte helfen Sie …

    – Si8

    10. Februar 2016 um 16:40 Uhr

1159470cookie-checkÜbergeordnetes Menüelement hervorgehoben lassen, nachdem der Mauszeiger über das Untermenü bewegt wurde (HTML/CSS/Jquery)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy