Question

我正在做一个2级垂直菜单。第二级菜单项是单选按钮+标签，使用CSS自定义，仅显示标签，如div。

然后，我想在鼠标离开菜单时显示已选中的单选按钮项。我这样做，但现在当检查收音机并且我想选择另一个子菜单项时，选中的项目将超过其他子菜单项。

这是我的代码，但请更好看小提琴演示。

我的HTML

<div id="menu_tipo">

    <div class="menu_item" id="menu_item_0">

        <div class="title_item">
            <img class="pin_menu" src="{{asset('assets/pin.png')}}" alt="">
            <span class="menu_span">Element 1</span>
            <img class="icono_menu" src="{{asset('assets/nextopen.png')}}" alt="">
        </div>

        <div class="menu_radios" id="menu_radios">
            <div class="menu_radios_item" id="item_entrada">
                <input name="tipo" value="entrada" id="dest_entrada" type="radio">
                <label class="radio" for="dest_entrada">
                    <img class="pin_menu" src="{{asset('assets/star.png')}}" alt="">
                    1.1
                </label>
            </div>
            <div class="menu_radios_item" id="item_articulo">
                <input name="tipo" value="articulo" id="art_entrada" type="radio">
                <label class="radio" for="art_entrada">
                    <img class="pin_menu" src="{{asset('assets/images.png')}}" alt="">
                    1.2
                </label>
            </div>
        </div>

    </div>
    <div class="menu_item" id="menu_item_1">

        <div class="title_item">
            <img class="pin_menu" src="{{asset('assets/pin.png')}}" alt="">
            <span class="menu_span">Element 2</span>
            <img class="icono_menu" src="{{asset('assets/nextopen.png')}}" alt="">
        </div>

        <div class="menu_radios" id="menu_radios">
            <div class="menu_radios_item" id="item_entrada">
                <input name="tipo" value="juego" id="dest_juego" type="radio">
                <label class="radio" for="dest_juego">
                    <img class="pin_menu" src="{{asset('assets/star.png')}}" alt="">
                    2.1
                </label>
            </div>
            <div class="menu_radios_item" id="item_articulo">
                <input name="tipo" value="portada" id="portada_juego" type="radio">
                <label class="radio" for="portada_juego">
                    <img class="pin_menu" src="{{asset('assets/images.png')}}" alt="">
                    2.2
                </label>
            </div>
        </div>
    </div>      
</div>

我的CSS

#menu_tipo{ height: auto;}

.menu_item{
    background-color: black;
    width: 180px;
    height: 34px;
    position: relative;
}
.menu_item:hover{
    background-color: #45BBE6;
    cursor: default;
}
.title_item{ width: 100%; overflow: hidden; }
.menu_span{height: 34px;float: left;line-height: 34px;color: white;}
.icono_menu{margin: 5px 0px 5px 0px;height: 24px;width: auto;float: right;}
.pin_menu{margin: 5px 15px 5px 5px;height: 24px;float: left;width: auto;}

.menu_item:hover .menu_radios_item label{cursor: pointer; display: block;}
.menu_radios{
    position: absolute;
    left: 180px;
    top: 0px;
    display: block;
}
.menu_radios_item{
    background-color: #0F0F0F;
}
.menu_radios_item label{
    background-color: #0F0F0F;
    display: none;
    width: 300px;
    height: 34px;
    line-height: 34px;
    color: white;
    cursor: pointer;
}
.menu_radios_item label:hover{ background-color: #45BBE6; }
.menu_radios input[type=radio]{ display: none; }
.menu_radios input[type=radio]:checked + .radio{ background-color: orange; display: block;}
//.menu_item:hover .menu_radios input[type=radio]:checked + .radio{display: none;}

Fiddle demo

查看示例：

选择演示的“2.1”元素。
选中“2.1”后，尝试选择“1.2”元素。

我该如何解决这个问题？我想要以下步骤：

当鼠标退出菜单时，显示已检查的项目。
当鼠标悬停在菜单上时，如果选中的项目拥有悬停项目，则检查项目不会显示。

我正在尝试做的示例：我选择了“2.1”。当我离开菜单时，显示“2.1”。当我结束“元素1”时，“2.1”不显示。当我结束“元素2”时，显示“2.1”。

我希望我解释得很好。谢谢你的帮助！

将鼠标悬停在另一个项目上时，不显示所选菜单项

0 个答案: