'有效'类不工作

我有一个问题，我的CSS。我试图设置活动类在垂直菜单上以粉红色突出显示，但事实并非如此。我如何保持它在没有用户悬停在其上的情况下点亮。这里是我的HTML和CSS。'有效'类不工作

HTML代码：

<div id="cssmenu"> 
    <ul> 
    <li class="active"><a href="http://www.local-trends.com/cellphones--parts.html">Shop All</a></li> 
<li><a href="#">Cell Phones & Smartphones</a></li> 
<li><a href="#">Smart Watches</a></li> 
<li><a href="#">Batteries</a></li> 
<li><a href="#">Cases, Covers & Skins</a></li> 
<li><a href="#">Chargers & Cradles</a></li> 
<li><a href="#">Headsets</a></li> 
<li><a href="#">Phone Cards & SIM Cards</a></li> 
<li><a href="#">Cell Phone & Smartphone Parts</a></li> 
    </ul> 
</div>

CSS代码：

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#cssmenu ul { 
    position: relative; 
    z-index: 597; 
    float: left; 
} 
#cssmenu ul li { 
    float: left; 
    min-height: 1px; 
    line-height: 1em; 
    vertical-align: middle; 
} 
#cssmenu ul li.hover, 
#cssmenu ul li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
} 
#cssmenu ul ul { 
    margin-top: 1px; 
    visibility: hidden; 
    position: absolute; 
    top: 1px; 
    left: 99%; 
    z-index: 598; 
    width: 100%; 
} 
#cssmenu ul ul li { 
    float: none; 
} 
#cssmenu ul ul ul { 
    top: 1px; 
    left: 99%; 
} 
#cssmenu ul li:hover > ul { 
    visibility: visible; 
} 
#cssmenu ul li { 
    float: none; 
} 
#cssmenu ul ul li { 
    font-weight: normal; 
} 
/* Custom CSS Styles */ 
#cssmenu { 
    font-family: 'Lato', sans-serif; 
    font-size: 18px; 
    width: 200px; 
} 
#cssmenu ul a, 
#cssmenu ul a:link, 
#cssmenu ul a:visited { 
    display: block; 
    color: #848889; 
    text-decoration: none; 
    font-weight: 300; 
} 
#cssmenu > ul { 
    float: none; 
} 
#cssmenu ul { 
    background: #fff; 
} 
#cssmenu > ul > li { 
    border-left: 3px solid #d7d8da; 
} 
#cssmenu > ul > li > a { 
    padding: 10px 20px; 
} 
#cssmenu > ul > li:hover { 
    border-left: 3px solid #ff0040; 
} 
#cssmenu ul li:hover > a { 
    color: #ff0040; 
} 
#cssmenu > ul > li:hover { 
    background: #f6f6f6; 
}

来源

2017-06-01 k4r1

没有ü检查？无论你的DOM有没有活跃的类？ –

适用于'active''''元素的CSS在哪里？ –

你不在css中使用'.active'。你应该添加像'#cssmenu ul li.active {color：pink; ''给你的CSS。 –

在你的CSS中没有.active类。你应该把这些添加到你的CSS中。

变化

这：

#cssmenu > ul > li:hover{ 
    border-left: 3px solid #ff0040; 
} 
#cssmenu ul li:hover > a{ 
    color: #ff0040; 
} 
#cssmenu > ul > li:hover{ 
    background: #f6f6f6; 
}

这样：

#cssmenu > ul > li:hover, #cssmenu > ul > li.active { 
    border-left: 3px solid #ff0040; 
} 
#cssmenu ul li:hover > a, #cssmenu ul li.active > a { 
    color: #ff0040; 
} 
#cssmenu > ul > li:hover, #cssmenu > ul > li.active { 
    background: #f6f6f6; 
}

来源

2017-06-01 09:22:11

工作！ THX一个很多人（ - ：那个伎俩 – k4r1

我看不到申请active类中的任何css。

li.active{ color: pink; } //Try using this

来源

2017-06-01 09:21:16

添加jQuery插件和CSS代码

CSS：

#cssmenu ul li.active a{ 
     background:pink; 
}

HTML代码：

<div id="cssmenu"> 
    <ul> 
    <li class="active"><a href="http://www.local-trends.com/cellphones--parts.html" onclick="myFunction(this)">Shop All</a></li> 
    <li><a href="#" onclick="myFunction(this)">Cell Phones & Smartphones</a></li> 
    <li><a href="#" onclick="myFunction(this)">Smart Watches</a></li> 
    <li><a href="#" onclick="myFunction(this)">Batteries</a></li> 
    <li><a href="#" onclick="myFunction(this)">Cases, Covers & Skins</a></li> 
    <li><a href="#" onclick="myFunction(this)">Chargers & Cradles</a></li> 
    <li><a href="#" onclick="myFunction(this)">Headsets</a></li> 
    <li><a href="#" onclick="myFunction(this)">Phone Cards & SIM Cards</a></li> 
    <li><a href="#" onclick="myFunction(this)">Cell Phone & Smartphone Parts</a></li> 
    </ul> 
    </div>

功能代码：

<script> 
    function myFunction(tag) { 
     $("#cssmenu ul li.active").removeClass("active"); //remove previous li active class 
     $(tag).closest("li").addClass("active"); //set active class to clicked li 
     alert($(tag).text()); 
    } 
    </script>

来源

2017-06-01 09:34:09

'有效'类不工作

回答

相关问题