'有效'類不工作

我有一個問題，我的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

'有效'類不工作

回答

相關問題