CODEWITHSUNDEEP
htmlcss
abkds
abkds

Reputation: 1794

`hover` pseudo-class not working

This is my css file, till now I have made a simple navigation bar. But the point is for my <a> elements in the navigation bar, when I try to style them both in case a and a:hover they work only when I give !important. What is happening. Is there a specificity issue ? 

@import url('http://fonts.googleapis.com/css?family=Lato');

.navbar {
  background-color: #b6b5b4;
  border-style: solid;
}

.container {
  background-color: #bfbfbf;
}

body {
  font-family: Lato;
}

a {
  color: black !important;
  font-weight: bold;
}

.navbar-right {
  background-color: #aeaeae;
}

a:hover {
  background-color: #dfdfdf !important;
}

I am new to css and html.

Upvotes: 0

Views: 514

Answers (5)

Akash Pinnaka
Akash Pinnaka

Reputation: 475

Yes, If u give like this

a {
  background-color: black !important;
}

!important overrides the hover state styles also.

 a {
      background-color: dfdfdf;
    }

doesn't work.

give your style like this

a {
   background-color: black;
  }
//remove !important

remove !important from <a> tag. Hover state works normally.
Let me know if u get any errors.

Upvotes: 0

Igor Ivancha
Igor Ivancha

Reputation: 3451

You have default css file with styles with its nesting! quick fix for this issue: assign class for <a> with your styles!

a.my-class {
  color: black;
   font-weight: bold;
}
a.my-class:hover {
  background-color: #dfdfdf;
}

Upvotes: 0

rishabh dev
rishabh dev

Reputation: 1743

What is happening is parent divs like .container (may be, dont have your html structure) is having background-color css.
This css will override the hover css on child <a> element. !important keyword is made only for this purpose. It does not allow other styles to override itself.
Thats why you should use !important keyword in such cases.

Upvotes: 1

Mmm Donuts
Mmm Donuts

Reputation: 10283

You imported Bootstrap, which has default CSS styling. What you're basically doing, is trying to overwrite those styles. However, Bootstrap seems to be taking precedence over your CSS (probably due to the order of the imports in your HTML file), thus requiring !important. The !important tag makes sure that, that particular style cannot be overwritten or, is always displayed over others. 

<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

If your ordering is like this, Bootstrap styling will be displayed, unless you use !important.

Upvotes: 2

Vinothkumar Nataraj
Vinothkumar Nataraj

Reputation: 588

a:hover { background: #dfdfdf !important;}

use this one

Upvotes: 0

Related Questions