悬停在css菜单活动li类上不起作用？对他人有效？

Posted 2023-05-08

【中文标题】悬停在css菜单活动li类上不起作用？对他人有效？

【英文标题】：Hover not working on css menu active li class? Works on others?

【发布时间】：2015-08-03 18:58:56

【问题描述】：

我似乎无法在我的第一个 CSS 菜单导航按钮上使用悬停。这是一个活跃的li类，有人有什么想法吗？另一个菜单选项的悬停效果工作得很好。 CSS 代码：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */#cssmenu,
#cssmenu > ul 
  background: url(images/highlight-bg.png) no-repeat;
  padding-bottom: 3px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  left:0px;
  top:0px;  


#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after 
  content: "";
  display: table;

#cssmenu:after,
#cssmenu > ul:after 
  clear: both;

#cssmenu 
  width: auto;
  zoom: 1;


li.space1
    visibility: hidden;


li.space2
    visibility: hidden;


#cssmenu > ul 
  background: url(images/menu-bg.png) no-repeat;
  margin: 0;
  padding: 0;
  position: relative;

#cssmenu > ul li 
  margin: 0;
  padding: 0;
  list-style: none;

#cssmenu > ul > li 
  float: left;
  position: relative;

#cssmenu > ul > li > a 
  padding: 20px 26px;
  display: block;
  color: white;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #9e3825;
  text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
  line-height: 18px;
  margin-right: 10px;


#cssmenu > ul > li:hover > a 
  background: url(images/hover.png) repeat;
  text-shadow: 0 -1px 0 #97321f;
  text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);

#cssmenu > ul > li > a > span 
  line-height: 18px;
  margin-right: 5px;

#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active 
  background: url(images/active.png) no-repeat;

/* Childs */
#cssmenu > ul ul 
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 120px;
  background: url(images/highlight-bg.png) repeat;
  margin: 0;
  padding: 0;
  z-index: -1;

#cssmenu > ul li:hover ul 
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #000;
  z-index: 2;
  top: 52px;
  left: 0;

#cssmenu > ul ul:before 
  content: "";
  position: absolute;
  top: -10px;
  width: 100%;
  height: 20px;
  background: transparent;

#cssmenu > ul ul li 
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;

#cssmenu > ul ul li a 
  padding: 18px 26px;
  display: block;
  color: #393939;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  width: 150px;
  border-left: 4px solid transparent;
  text-shadow: 0 1px 0 white;

#cssmenu > ul ul li a:hover 
  border-left: 4px solid #de553b;
  background: url(images/hover.png) repeat;
  color: white;
  text-shadow: 0 1px 0 black;

#cssmenu > ul ul li a:active 
  background: url(images/menu-bg.png) no-repeat;


#Table_01 
    position:absolute;
    left:0px;
    top:1px;
    width:864px;
    height:1px;
    visibility: inherit;



#DropDown-Design2-11 
    position:absolute;
    left:0px;
    top:50px;
    width:347px;
    height:166px;


#DropDown-Design2-12 
    position:absolute;
    left:347px;
    top:50px;
    width:103px;
    height:142px;


#DropDown-Design2-13 
    position:absolute;
    left:450px;
    top:50px;
    width:223px;
    height:166px;


#DropDown-Design2-14 
    position:absolute;
    left:673px;
    top:50px;
    width:191px;
    height:166px;


#DropDown-Design2-15 
    position:absolute;
    left:347px;
    top:192px;
    width:103px;
    height:24px;

【问题讨论】：

我试图将您的代码复制到小提琴中，并且悬停似乎适用于每个菜单选项。见这里：jsfiddle.net/xo430tm0.

这是一些非常非常混乱的代码。我强烈建议您清理并重写它。您应该在 JSFiddle 中发布您的代码，以便人们可以查看和编辑它。

对不起，也许我应该澄清一下——下拉菜单正在工作，是的；但是，当您实际将鼠标悬停在菜单项上时出现的图形在第一个菜单项上不起作用；在本例中为“项目”

抱歉，与“项目”选项相比，我真的看不到任何其他菜单选项中的任何图形或任何不同之处。你能看看我链接的小提琴是否真的做了你认为应该做的一切？

我明白了。我没想到您发布的代码如此不完整，所以我真的无法在小提琴中重现任何这些。无论如何，从我在截图中看到的，你的意思是第一个菜单选项在悬停时不会变成浅灰色，这发生在所有其他菜单选项上，对吧？这可能是因为解决起来非常简单，但肯定是在您粘贴的文件之外的另一个 CSS 文件中。

【参考方案1】：

试试这样：Demo

如果您需要将鼠标悬停在活动状态的效果，则将鼠标悬停用于活动li，如下所示：

CSS：

#cssmenu > ul > li:hover > a,#cssmenu > ul > li:hover.active > a 
    background:#000 url(images/hover.png) repeat;
    text-shadow: 0 -1px 0 #97321f;
    text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);