CSS 头疼的是无法让某些按钮在悬停时更改背景

Question

我经常与 bootstrap 一起工作，有时真的很难弄清楚为什么当您想推翻 CSS 为您做出的某些 CSS 决定时某些事情不起作用.

所以我一直在尝试更改鼠标悬停时按钮的背景颜色，以便每个按钮在鼠标悬停时获得不同的颜色。但不知何故，我的 css class 并没有覆盖它。

这是我目前的情况：

<style type="text/css">
.fblue_background>li>a:hover, .fblue_background>li>a:focus  {
background-color: blue !important;
}
.tblue_background>li>a:hover, .fblue_background>li>a:focus  {
background-color: blue !important;
}
.pred_background>li>a:hover, .fblue_background>li>a:focus  {
background-color: red !important;
}
</style>



<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i></a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i></a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i></a></li>

PS：当我将 class 值放在 <li>

之间时它也不起作用

Answer 1

试试这个

.nav>li>.blue:hover, .nav>li>.red:focus  {
  background-color: blue !important;
}
.nav>li>.green:hover, .nav>li>.blue:focus  {
  background-color: #5EACC5 !important;
}
.nav>li>.red:hover, .nav>li>.red:focus  {
  background-color: red !important;
}

Answer 2

当您在 CSS 中使用 > 方法时，它将严格遵循 HTML 标记。所以当你想改变 a 元素时，你应该做

a.blue{
background:#0000ff; 
}

Answer 3

要更改 <a> link 的背景，您只需像这样直接为 class 添加 :hover。

<style type="text/css">
    .fblue_background:hover, .fblue_background:focus  {
        background-color: blue;
    }
    .tblue_background:hover, .fblue_background:focus  {
        background-color: blue;
    }
    .pred_background:hover, .fblue_background:focus  {
        background-color: red;
    }
</style>

<ul>
    <li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Facebook</a></li>
    <li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Twitter</a></li>
    <li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Pinterest</a></li>
</ul>

jsfiddle link: https://jsfiddle.net/g9y2v91e/

Answer 4

问题是您将 .fblue_background 视为 li 的父级，但事实并非如此。请参阅以下修改后的代码：

<style type="text/css">
li>a.fblue_background:hover, li>a.fblue_background:focus  {
background-color: blue !important;
}
li>a.tblue_background:hover, li>a.tblue_background:focus  {
background-color: blue !important;
}
li>a.pred_background:hover, li>a.pred_background:focus  {
background-color: red !important;
}
</style>



<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Hello</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Bonjour</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Hi</a></li>

CSS 头疼的是无法让某些按钮在悬停时更改背景

CSS headache can't get certain buttons to change background on hover

css

button

hover