1

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

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

4

2 回答 2

0

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

您要定位的 css 是：

#header ul li a#selected {background:red /* or whatever color you want it */ }
于 2012-10-30T13:28:31.230 回答
0

试试这个代码

<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/

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

于 2012-10-30T13:29:42.753 回答