Question

我对菜单有疑问。如果我选择li项，我希望所选项具有与li:hover状态相同的背景颜色属性并保持不变，直到我悬停并选择另一个li项。 / p>

这是我的HTML：

<div class="submenu-container">
    <div class="submenunavYH">
        <p>YH Högskola</p>
        <div class="submenusettings"></div>
        </div>
        <div class="submenuYH submenu">
        <ul>
            <li><a href="utbild.html">
                <p>Visual Merchandiser YH</p>
            </a></li>
            <li><a href="lia.html">
                <p>LIA</p>
            </a></li>
            <li><a href="faq.html">
                <p>FAQ</p>
            </a></li>
            <li><a href="ansok.html">
                <p>Ans&ouml;k h&auml;r</p>
            </a></li>
        </ul>
    </div>
</div>

这是我的css：

.submenu-container {
    display: block;
    position: relative;
    width: 220px;
    background-color: #f3f0ef;
    margin: 3% auto 0;
    padding: 0;

}

.submenunavYH, .submenunavRetail, .submenunavProjekt{
    height: 40px;
    text-align: center;
    line-height: 2.5em;
    color: #ffffff;
}

.submenunavYH{
    background-color: #660066;
}

.submenunavRetail{
    background-color: #336600;
}


.submenunavProjekt{
    background-color: #000000;
}  

.submenuYH ul li:hover {
    border-left:3px solid #cc66cc;
    background-color:rgba(204,102,204,0.1);
}

.submenuRetail ul li:hover {
    border-left:3px solid #99CC66;
    background-color:rgba(153, 204, 102,0.1);
}

.submenuProjekt ul li:hover {
    border-left:3px solid #666666;
    background-color:rgba(102, 102, 102,0.1);
}

.submenusettings {
    height:20px;
    float:right;
    width:20px;
    margin:10px;
}

.submenu ul {
    list-style:none;
    margin: 0;
    padding: 0;
}

.submenu ul li {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 11px 10px;
    box-shadow: inset 0 1px 1px #fff;
    text-indent: 10px;

}

.submenu ul li a {
    font-size:14px;
    color:#a4a3a3;
    font-family: 'Strait', sans-serif;
    font-size:14px;
    text-decoration:none;
    text-shadow: 1px 1px 1px #fff;
}

如果我例如a：active与.submenuYH ul li:hover具有相同的属性，它是否会在我释放鼠标后保留这些属性？

Answer 1

将菜单编码为无序列表，其中包含样式和位置所需的ID和类：

<nav id="menu">
    <ul>
        <li id="parentLi"><a><span>YH Högskola</span></a>
            <ul class="submenu">
                <li id="childLi"><a href="#">Visual Merchandiser YH</a></li>
                <li id="siblingLi1"><a href="#">LIA</a></li>
                <li id="siblingLi2"><a href="#">FAQ</a></li>
            </ul>
        </li>
    </ul>
</nav>

您可以根据需要使用javascript并添加类，以突出显示所选页面的路径。

$(document).ready(function () {
     $('#parentLi').addClass('current');
     $('#childLi').addClass('selected');
)};

然后只需创建类.current和.selected，使其具有与悬停相同的样式。
您将需要设置样式的css选择器：

   #menu {
   }
   #menu > ul span {
   }
   #menu li ul li {
   }
   #menu li {
   }
   #menu li ul li:hover {
   }
   #menu li ul {
   }
   #menu li ul li {
   }
   #menu li ul li a {
   }

您可以看到完整效果on this site。当您悬停能源效率时，您将看到所有父母都被突出显示以及当前页面

选择的项目状态

1 个答案: