如何为鼠标悬停编写 CSS [重复]答案

【问题标题】：How do I write a CSS for mouse hover [duplicate]如何为鼠标悬停编写 CSS [重复]
【发布时间】：2012-09-17 20:22:41
【问题描述】：

可能重复：
How to use CSS hover inside html-tag?

<body>
   <div id="he">
      <div id="header">
         <div class="headertabs">
            <ul class="nav">
               <li class="divide">&nbsp;</li>
               <li class="tab"><a href="a.php">OVERVIEW1</a></li>
               <li class="divide">&nbsp;</li>
               <li class="tab"><a href="a.php">OVERVIEW2</a></li>
</body>

当我在overview1和overview2选项卡上移动鼠标（悬停）时如何编写css，它必须将其文本颜色更改为绿色。

【问题讨论】：

一个简单的谷歌会产生这些结果：w3schools.com/cssref/sel_hover.asp quirksmode.org/css/hover.html
请注意，您缺少很多关闭标签。
你的意思是“它必须把它的颜色变成绿色”？是背景，文本颜色，边框...问题不清楚你想要实现什么，以及谷歌搜索 CSS Hover 会有很大帮助。
文本颜色，overview1和overview2

标签： php html css

【解决方案1】：

简单地使用 :hover 伪选择器：

li.tab a:hover
{
   color: green
}

http://jsfiddle.net/Kyle_/duj2d/

【讨论】：

【解决方案2】：

略短：

    .tab a:hover{color:green}

【讨论】：

【解决方案3】：

另一种方式

li a:hover{
 color:green;
}

【讨论】：

【解决方案4】：

我会将鼠标悬停在<a> 上，而不是为了更好地支持 IE，我还会更改焦点颜色，以便在浏览链接时仅针对键盘用户更改，所以：

.tab a:hover, .tab a:focus {
  color: green
}

【讨论】：

【解决方案5】：

我从一个打开的文件中截取了一些 CSS，应该可以很好地解释它：

这是我的锚的正常 CSS：

a
{
    color: #006699;
    text-decoration: underline;
}

这是在鼠标悬停时改变颜色的位。

a:hover
{
    text-decoration: none;
}

【讨论】：