Question

我的css文件中有以下类

  #megamenu {
    /*styling here*/
  }

  #megamenu li {
    /*styling here*/
  }

  #megamenu li:hover {
    /*styling here*/
  }

在我的HTML中我有

   <ul id="megamenu">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>

当然，所有li元素都会将悬停应用于它们。如何仅为第3项关闭悬停？

Answer 1

更新 Css将覆盖定义的顶部到底部的所有样式

＆＃13;

 #megamenu {
    /*styling here*/
  }

  #megamenu li {
    /*styling here*/
  }

  #megamenu li:hover {
    color: green
  }
  #megamenu li:nth-child(3):hover {
    color: yellow
  }

＆＃13;

<ul id="megamenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

使用nth-child

  #megamenu li:nth-child(3):hover {
    /*styling here*/
  }

这是一个完整的演示

＆＃13;

 #megamenu {
    /*styling here*/
  }

  #megamenu li {
    /*styling here*/
  }

  #megamenu li:hover {
    color: blue
  }

  #megamenu li:nth-child(3):hover {
    color: red
  }

＆＃13;

<ul id="megamenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

如果您只有3个元素，则可以使用:last-child

＆＃13;

     #megamenu {
        /*styling here*/
      }

      #megamenu li {
        /*styling here*/
      }

      #megamenu li:hover {
        color: blue
      }

      #megamenu li:last-child:hover {
        color: red
      }

＆＃13;

<ul id="megamenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

Answer 2

像这样添加：

 #megamenu {
  list-style: none;
display: inline-flex;
  }

  #megamenu li {
  padding-left: 10px;
  }

  #megamenu li:not(:last-child):hover {
   color:red;
  }

工作小提琴：http://jsfiddle.net/Lgkf75jb/

替代方案，对于特定的li，您可以添加类，并像这样给出

HTML code：

<ul id="megamenu">
     <li>Item 1</li>
     <li>Item 2</li>
     <li class="no_effects">Item 3</li>
   </ul>

CSS样式：

 #megamenu {
  list-style: none;
display: inline-flex;
  }

  #megamenu li {
  padding-left: 10px;
  }

  #megamenu li:not(.no_effects):hover {
   color:red;
  }

小提琴：http://jsfiddle.net/Lgkf75jb/1/

HTML - 覆盖菜单中<li>元素的样式</li>

2 个答案: