Question

我有超链接，我想在鼠标悬停时更改颜色，以显示它们是响应式并获得丰富的用户界面，但我无法实现此目的。

这是小提琴.. Fiddle

这是HTML ...

<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
    <div id="footerAboutUS" style="float:left; width:150px; position:relative;  margin-left: 10px; margin-top: 7px;">
        <label style="font-size:18px; color: #6c3f00;">About US</label>
        <br/> <a href="#" style="color: gray;text-decoration:none;font-size: 11px;">Our Delivery Model</a>

        <br/> <a href="#" style="color: gray;text-decoration:none;font-size: 11px;">Solution Area</a>

        <br/> <a href="#" style="color: gray;text-decoration:none;font-size: 11px;">List of Industries</a>

        <br/> <a href="#" style="color: gray;text-decoration:none;font-size: 11px;">IT Management</a>

        <br/> <a href="#" style="color: gray;text-decoration:none;font-size: 11px;">Lines of Business</a>

    </div>
</div>

Answer 1

尝试删除覆盖css的lement样式属性然后使用下面的标签

<style>
    a {
        color: gray;
        text-decoration: none;
        font-size: 11px;
    }

        a:hover {
            color: red;
        }
</style>

Answer 2

使用class代替样式

喜欢：

.class1{

color: gray;

text-decoration:none;

font-size: 11px;

}

并在悬停时更改颜色，如

.class1:hover{

color: blue;

text-decoration:none;

font-size: 11px;

}

Answer 3

首先，从a元素中删除颜色灰色（在你的html文件中）。然后将其插入您的css：

a {
    color: gray;
}

a:hover {
    color: red;
}

使用演示：http://jsfiddle.net/RubberPoint/d9n79/

Answer 4

您可以使用'hover'伪类CSS在鼠标上设置不同的颜色。

示例：

.footer-shadow a:hover {
  color: red;
}

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

Answer 5

首先，不要将<a>代码的内联样式用作color: gray;。因为如果你使用内联样式，你就不能覆盖另一种样式（内部，外部）。

a{

color: gray; //you can add your more style here
}

并且让鼠标改变使用它。

a:hover{

color: blue; //you can add your more style here
}

否则，请为html元素使用一些ID或类，以避免对所有<a>标记进行一般性更改

Answer 6

只需添加:hover选择器并添加!important规则即可覆盖当前样式

点击此链接：http://jsfiddle.net/z45Xz/4/

.footer-shadow a:hover{
   color: red !important;
}

Answer 7

上述答案中提到的第一件事不要使用内联样式。只是

a{
color:grey;
text-decoration:none;
}

当你悬停鼠标时改变颜色使用psedo类“悬停”如

a:hover
{
color:green;
}

鼠标悬停在超链接中的样式

7 个答案: