Question

我正在尝试更改列表项home的背景，以确保它具有悬停属性，即使它没有悬停。即使我使用类提到它，文本也不会改变。

HTML：

         <div id="header">
     <img id="logo" src="images/logo.jpg">
     <ul>
     <li> <a href="#">CONTACT</a> </li>
     <li> <a href="#">GALLERY</a> </li>
     <li> <a href="#">EVENTS</a> </li>
     <li> <a href="#" class="currentpage">HOME </a> </li>
     </ul>          
     </div>

CSS：

       #header ul {
        padding-top:1em;
          }

       #header ul li a.currentpage {
        color:white !important;
        background-color: #F96E5B !important;
       }

       #header ul li a {
        text-decoration: none;
        color:#676767;
        font-family: 'Oswald', sans-serif;
        font-size: 1em;
        float:right;
        line-height: 3em;
        padding-right: 1em;
        padding-left:1em;
           }

          #header ul li a:hover{
      background-color: #F96E5B;
          }

http://ashwin931996.webege.com

Answer 1

从您发布的网页/链接查看代码后，您似乎想要更改所提供项目的代码背景颜色id="selected"

您要定位的CSS是：

#header ul li a#selected {background:red /* or whatever color you want it */ }

Answer 2

试试这段代码

<li>
<a  class="one" href="#">CONTACT</a>
</li>
<li>
<a class="two" href="#">GALLERY</a>
</li  class="one">
<li>
<a class="three" href="#">EVENTS</a>
</li>
<li>
<a class="four" href="#">HOME </a>
</li>

CSS

#header ul li a.one:hover
{background-color: #F96E99;
color: white;}
#header ul li a.two:hover
{background-color: #F96E22;
color: white;}
#header ul li a.three:hover
{background-color: #F96Eaa;
color: white;}
#header ul li a.four:hover
{background-color: #F96E55;
color: white;}

演示; http://jsfiddle.net/PbMg2/1/

您需要提及单独的班级悬停功能。我希望这可能对你有所帮助。

更改特定列表项属性

2 个答案: