CODEWITHSUNDEEP
cssbuttonhover
Niels
Niels

Reputation: 1006

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

I work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you.

So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it.

Here is what I have so far: 

<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: it also doesn't work when I put the class value between <li>

Upvotes: 0

Views: 52

Answers (4)

Narendra CM
Narendra CM

Reputation: 1426

To change background of <a> link you just need to add :hover for class directly like this.

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

Upvotes: 0

David Wilkinson
David Wilkinson

Reputation: 5118

The problem is you're delcaring .fblue_background as if it's the parent of the li, this isn't the case. See revised code below:

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

Upvotes: 1

cheralathan
cheralathan

Reputation: 572

Try this

.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;
}

Upvotes: 0

ImAtWar
ImAtWar

Reputation: 1143

When you are using the > method in CSS it would strictly follow the HTML markup. So when you want to change the a element, you should be doing 

a.blue{
background:#0000ff; 
}

Upvotes: 0

Related Questions