CSS悬停效果不适用于我的代码答案

【问题标题】：CSS hover effect is not working on my codeCSS悬停效果不适用于我的代码
【发布时间】：2013-06-29 04:59:52
【问题描述】：

下面的代码在 ie 9 中运行良好，在任何其他浏览器中都无法运行。当我将鼠标悬停在列表背景上时应该改变颜色，但它没有。

.menunews ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.menunews a {
  display: block;
  color: #266CAE;
  height: 30px;
  background: #ffffff;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  width: 100%;
  height: 2.72em;
  line-height: 2.75em;
  text-indent: 2.02em;
  text-decoration: none;
}

.menunews li a:hover {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color- stop(47%, #f6f6f6), color-stop(100%, #ededed));
  background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
  color: #266CAE
}

<ul style="font-size:12px;">
  <li class="menunews">
    <a href=""><span style="margin-left:2px;">Hello test</span></a>
  </li>
</ul>

【问题讨论】：

menunews 类你已经为 li 提到了它，因此 css 应该是 li.menunews a:hover{....}
ul 的父 div 有 .menunews 类吗？？因为你是这样写 css 的，
jsfiddle.net/Kritika/L767M 看看这个 jsfiddle

标签： html css

【解决方案1】：

嘿，实际上你用其他方式制作了 CSS，这就是为什么浏览器不理解你的 css 代码 所以我对你的 css 做了一些更改strong> 并且它可以根据您的要求在所有浏览器上正常工作，所以我希望这会对您有所帮助.....

ul li.menunews {
    border-bottom: 1px solid #ccc;  
    list-style:none; 
    height:30px;
}
ul li.menunews a {
    display:block;
    color:#266CAE;
    text-decoration:none;
}
    
ul li.menunews:hover {
    background:#ffffff;
    background:-moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed)); 
    background:-webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
    background:-o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
    background:-ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background:linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );color:#266CAE} 
}

<ul style="font-size:12px;">
    <li class="menunews"><a href="#"><span style="margin-left:2px;">Hello test</span></a></li>
</ul>

【讨论】：

【解决方案2】：

在ul而不是li中定义你的类以便生效：

<ul class="menunews" style="font-size:12px;"><li ><a href="#" >

【讨论】：

这是此修复的jsFiddle demo。该演示还重新格式化了 HTML 和 CSS 以使代码更易于阅读和编辑，并且我修复了两次出现的连字符后面不应该存在的空格（text- decoration 和 color- stop）。

【解决方案3】：

你提到menunews类到li，css应该是li.menunews，使用下面的css代码

 ul{
   margin:0px;
   padding:0px;
   list-style-type:none;
 }
 .menunews a{
        display:block;
        color:#266CAE;
        height:30px;
        background:#ffffff;
        border-bottom: 1px solid  #ccc;
        overflow:hidden;
        width:100%;
        height:2.72em;
        line-height:2.75em;
        text-indent:2.02em;
        text- decoration:none;
        }

 li.menunews a:hover{
      background:#ffffff;
      background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%, #ededed 100%); 
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color- stop(47%,#f6f6f6), color-stop(100%,#ededed)); 
      background:-webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
      background:-o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
      background:-ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
      background:linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); 
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
      color:#266CAE;
      }

请看这个DEMO

【讨论】：