Question

我有一个内联菜单，我想要更改最后一个菜单项，以便它是一个不同颜色的文本框。我已经设法用以下课程完成了这项工作，但无论我尝试过什么，我似乎都无法改变悬停状态。我该如何编写脚本？感谢。

#navbar a.blogbox {
    background-color: #E4E9E7;
    padding: 3px;
    margin-left: 4px;
    border-left: none;
    text-transform:uppercase;
    font-weight: bold;
    color: #c52a45;
}

<div id="navbar">
  <ul>
      <li class="activepage">HOME</li>
      <li><a href="aboutus.html">about us</a></li>
      <li><a href="page1.html">page 1</a></li>
      <li><a href="page2.html">page 2</a></li>
      <li><a href="page3.html">page 3</a></li>
      <li><a href="page4.html">page 4</a></li>
      <li><a href="contact.html">contact</a></li>
      <li><a class="blogbox" href="/blog/index.php">Blog</a></li>
    </ul>
</div>

Answer 1

这是你想要发生的事吗？

＆＃13;

#navbar a.blogbox {
    background-color: #E4E9E7;
    padding: 3px;
    margin-left: 4px;
    border-left: none;
    text-transform:uppercase;
    font-weight: bold;
    color: #c52a45;
}
#navbar a.blogbox:hover {
    color: green;
}

＆＃13;

<div id="navbar">
  <ul>
      <li class="activepage">HOME</li>
      <li><a href="aboutus.html">about us</a></li>
      <li><a href="page1.html">page 1</a></li>
      <li><a href="page2.html">page 2</a></li>
      <li><a href="page3.html">page 3</a></li>
      <li><a href="page4.html">page 4</a></li>
      <li><a href="contact.html">contact</a></li>
      <li><a class="blogbox" href="/blog/index.php">Blog</a></li>
    </ul>
</div>

＆＃13;

应该很容易（但不适合我）css在课堂上悬停状态

1 个答案: