Question

你好，每当我将鼠标悬停在我的子模板的元素上时，我都会遇到有关设置背景图像的问题。我有以下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>

我知道这不是生成带有子菜单项的菜单的正确方法但是尽管如此，我怎么能得到我的灰色主页按钮（在主页按钮上悬停后变为可见）以便在我将鼠标悬停在＆时保持可见＃34; 我的数据＆＃34; 按钮？这可以用纯CSS吗？

我在这里有一个演示：JSFIDDLE

Answer 1

改变这个：

.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);
}

到此：

    .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);
}

我刚刚将 .menuitem_wrapper：hover .not_active 添加到同一规则中。

Answer 2

使用jQuery mouseover()和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')");
     });
});

还要对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;
}

工作示例 JSFIDDLE

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

2 个答案: