Question

我有下面的li对象，它是下拉菜单的一部分。我的问题是，当我将该子菜单（以及主导航栏中的所有其他子菜单）悬停时，它会更改为所需的字体和背景颜色＆＃34; li＆＃34;对象（字体：#304295，背景：light blue），但是当我仍然悬停在它上面但不直接在＆＃34; span＆＃34;它内部的对象（字母）仍然显示背景的light blue颜色，但字体字母变为白色。无论我将鼠标悬停在＆＃34; li＆＃34;它会保持我想要的条件（字体：#304295，背景; light blue）。我尝试过许多事情，例如使用!important条件，但仍然没有成功，我担心"a link"可能与外部的其他"a links"冲突。你可以清楚地看到当您悬停导航栏时www.es-processing.com。

 <li class=""><a href="http://www.es-processing.com/partnerships_awards.htm" target="_blank"><span>Partnerships</span></a></li>

这是我的CSS

#header .navigation > ul > .oussi:hover {
     background-color: #304295!important;
     color: #ffffff!important;
}

#header .navigation > ul > .oussi a span:hover {
     cursor: unset!important;
     background-color: #304295;
     pointer-events: none;
}

#header .navigation .oussi span:hover {
     color: #FFFFFF!important;
     font-size: 13px;
     font-weight: bold;
     text-decoration: none!important;
     cursor: unset!important;
     background-color: unset!important;
     pointer-events: none;
}

#header .navigation {
     background: none repeat scroll 0px 0px #304295;
     box-shadow: 0px 4px 4px -2px #232323;
     float: left;
     margin: 36px 0px 0px;
     position: relative;
     height: 30px!important;
     padding-top: 0px!important;
     padding-left: 26px!important;
     padding-right: 26px!important;
     width: 100%!important;
}

#header .navigation > ul > li {
     display: block;
     float: left;
     padding: 7px 4px;
     height: 16px!important;
} 

#header .navigation > ul > li:hover {
     background-color: #95A7FD!important;
     color: #304295!important;
}

#header .navigation > ul > li a span {
     color: #ffffff;
     font-family: arial;
     font-size: 1.1em;
     font-weight: bold;
     white-space: nowrap;
     height: 30px;
}

#header .navigation > ul > li a span:hover {
     cursor: pointer ! important;
     text-decoration: none!important;
     color: #304295!important;
}

#header .navigation > ul > li.last {
     display: block;
     float: right;
     padding: 7px 4px;
     height: 16px!important;
} 

#header .navigation > ul > li.last:hover {
     display: block;
     float: right;
     padding: 7px 4px;
     height: 16px!important;
     background-color: #95A7FD!important;
     color: #304295!important;
} 

#header .navigation a {
     color: #686868;
     font-size: 13px;
     font-weight: bold;
     height: 16px!important;
} 

#header .navigation li.hover > a {
     color: #cc0000;
     display: block;
     float: left;
     font-weight: bold;
}

#header .navigation li.hover a span {
     display: block;
     float: left;
     position: relative;
     width: auto;
     z-index: 101;
}

Answer 1

尝试将：hover伪类添加到包含元素。目前，仅当跨度（内联）悬停时，文本才会着色。你希望在容器悬停时，它会被着色。

例如，

li.hover span {
    color: #304295 !important;
}

或

li:hover span {
    color: #304295 !important;
}

（注意：你应该可以跳过重要的内容）

对于未来，请尝试添加jsfiddle或codepen。让您更轻松地帮助您

冲突的李徘徊

1 个答案: