0

ページにメニューがあります。

 <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;に変更すると、chrome では赤ですが、ie と mozilla では css が取得.editorial-tabs-menu li a:hoverされます。

4

1 に答える 1

0

スタイル定義を で後置して!important、他の定義を確実にオーバーライドすることができます。たとえば、css に次のように記述できます。

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

ドキュメントのすべてのタグに一致するものは...

この jsFiddle は、http://jsfiddle.net/GG2Da/1 を示しています。cssからを削除して!important、何が起こるかを確認してください。

お役に立てれば

于 2013-04-17T06:27:31.143 に答える