将鼠标悬停在子菜单项上后更改背景图像

Question

Hello I got question regarding setting a background-image whenever I hover on an element of my submmenu. I have the following HTML:

<div class="navbar navbar-default main-nav">
    <div class="container">
        <div class="navbar-header" tabindex="-1">
            <button type="button" class="navbar-toggle collapsed">
            </button>
        </div>
        <div class="collapse navbar-collapse" tabindex="-1">
            <div class="nav navbar-nav" tabindex="-1">
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="home_button not_active" href="#"></a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">My data</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a href="#">Menu 1</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">Submenu1</a>
                        <a href="#">Submenu2</a>
                    </div>
                </div>
                <div class="menuitem_wrapper" tabindex="-1">
                    <a class="active" href="#">Menu 2</a>
                    <div class="dropdown-menu" tabindex="-1">
                        <a href="#">submenu1</a>
                        <a href="#">submenu2</a>
                    </div>
                </div>
                <a href="#">FAQ</a>
                <a href="#">Contact</a>
                <a href="#">Logout</a></div>
        </div>
    </div>
</div>

I know this is not the proper way to generate a menu with submenu items but despite this, how could I get my grey home button (which becomes visible after hovering on the home button) to stay visible whenever I hover on the " my data" button? Is this possible with pure CSS?

I have a demo here: JSFIDDLE

Answer 1

Change this:

.not_active:hover {
    background-image: url(https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.pn);
}

to this:

    .not_active:hover, .menuitem_wrapper:hover .not_active {
        background-image: url(https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.pn);
}

I just added .menuitem_wrapper:hover .not_active to the same rule.

Answer 2

Use jQuery mouseover() and mouseout()

$(document).ready(function(){
     $(".dropdown-menu a").mouseover(function(){
         $("a.home_button.not_active").css("background-image", "url('https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.png')");
     });


$( ".dropdown-menu a" ).mouseout(function() {
$("a.home_button.not_active").css("background-image", "url('https://upload.wikimedia.org/wikipedia/commons/3/34/Home-icon.svg')");
     });
});

Also make changes to CSS

.not_active:hover {
    background-image: url(https://jira.transvar.org/secure/attachmentzip/unzip/14790/12882%5B1%5D/Home_Icon_for_IGB_pack/home_icon_grey_128x128_more_space_16x16.png)! important;
}

Working Example JSFIDDLE