0

我在 page 有一个菜单。

 <ul class="editorial-tabs-menu  menu">
   <li class="first"><a href="#" class="selected">Home
     <span></span>
    </a></li>
   <li><a href="#">Links</a>
     <ul>
      <li><a href="#analyzes">Link1</a></li>
      <li><a href="#ux">Link2</a></li>
     </ul>
   </li>
   <li><a href="#">About us</a></li>
 </ul>

我使用这个CSS：

.editorial-tabs-menu li a
{
display: block;
font-size: 13px;
font-weight: bold;
border: 1px solid #cfcfcf;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
background: -moz-linear-gradient(90deg,#F0F8FF,#fff);
background: -webkit-gradient(linear,0% 0,0% 100%,from(#F0F8FF),to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F8FF',endColorstr='#fff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#F0F8FF, endColorstr=#FFFFFFFF, GradientType=0)";
padding: 3px 0;
width: 83px;
text-align: center;
color: #666;
text-decoration: none;
font-family: 'B Nazanin',Tahoma,Arial;
position: relative;
/*border-bottom: none;*/
}

.editorial-tabs-menu li a:hover, .editorial-tabs-menu li .selected
{
    color: #FFF;
    color: rgb(255, 255, 255);
    background: -moz-linear-gradient(90deg, #095283, rgb(31, 108, 162)) repeat scroll 0px 0px transparent !important;
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#095283),to( rgb(31, 108, 162)));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#095283',endColorstr=' rgb(31, 108, 162)');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#095283, endColorstr='rgb(31, 108, 162)', GradientType=0)";
    border-color: #095283;
}

.menu ul li
{
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.menu li:hover > ul li
{
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a
{
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
    background: none;
    border: none;
    float: right;
    text-align: right;
    /*border-bottom: 1px solid #353539;*/
}

我想 background: none;在hover.

我设置了这个 CSS

.menu ul li a:hover
    {
        background: none;
        color: #095283;
    }

但是.editorial-tabs-menu li a:hover当子菜单悬停时它会得到css。

当我将此 css 更改为 时background: red;，它在 chrom 中是红色的，但它.editorial-tabs-menu li a:hover在 ie 和 mozila 中得到 css。

4

1 回答 1

0

您可以对样式定义进行后缀，!important以确保它覆盖任何其他定义。例如，您可以在 CSS 中编写：

a:hover{background-color: #f00 !important;}

这将匹配文档的所有标签...

这个 jsFiddle 说明了这一点，http://jsfiddle.net/GG2Da/1 - 尝试!important从 css 中删除，看看会发生什么。

希望这可以帮助

于 2013-04-17T06:27:31.143 回答