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

【问题标题】：Change background-image after hover on submenu item将鼠标悬停在子菜单项上后更改背景图像
【发布时间】：2016-05-09 19:18:22
【问题描述】：

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

我知道这不是生成带有子菜单项的菜单的正确方法，但尽管如此，当我将鼠标悬停在“ 我的数据” 按钮？纯 CSS 可以做到这一点吗？

我在这里有一个演示：JSFIDDLE

【问题讨论】：

可能只有我一个人，但您的 JSFiddle 似乎根本不起作用。缺少任何外部链接吗？

标签： html css

【解决方案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 添加到相同的规则中。

【讨论】：

谢谢！这正是我想要的！ :)

【解决方案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

【讨论】：