0

I am sure there is a very simple explanation for this but I have tried everything I can and seem to be missing it. I have the following css code which is applied to li items under a ul parent. I have applied by doing 

.test {
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  background-color: #d9edf7;
}
.test:hover {
  background-color: red;
  font-size: 14px;
}
<ul>
  <li class="test">test</li>
  <li class="test">test2</li>
  <li class="test">test3</li>
</ul>

The issue is that on hover, it changes the font size without changing the background. Am I missing something?

j08691
  • 204,283
  • 31
  • 260
  • 272
user3352112
  • 11
  • 3
  • 2
    That code is working per your description. – shamsup Jun 10 '16 at 14:42
  • 1
    It works in the snippet – Andrew Bone Jun 10 '16 at 14:42
  • 1
    As others have stated, the code you posted (which I inserted into a snippet) seems to work fine. Do you have other CSS rules (that you didn't post) that might be causing the issue? – j08691 Jun 10 '16 at 14:44
  • use chrome developer tools to inspect the css properties on :hover to check for any inheritance problems. [How to do this?](http://stackoverflow.com/a/6778547/3101532) – shamsup Jun 10 '16 at 14:44
  • When you create a [MCVE], you need to make sure that it really is *complete*. – Quentin Jun 10 '16 at 14:52
  • I used chrome developer as you advised and it shows it with a line through the background color, so I will investigate into inheritance problems as you say. – user3352112 Jun 10 '16 at 14:53
  • You got `!important` set by any chance? – putvande Jun 10 '16 at 14:55
  • If you want you can load all your code into http://jsfiddle.net so we can see it not working. You'll need to give us the link of course. – Andrew Bone Jun 10 '16 at 15:00
  • i just inserted !important and that didnt do the job. I even tested by putting the specific rule in a style tag within the html. I will just have to fiddle around until I get something – user3352112 Jun 10 '16 at 15:00
  • I am dealing with bootstrap, it turned out the .nav>li>a:hover rule was overriding me and i just changed my rule to .nav>li.test>a:hover. This way it changes the background on just .test classes instead of all nav's going forward – user3352112 Jun 10 '16 at 15:03
  • @user3352112 Read up on specificity. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Baruch Jun 10 '16 at 16:22
  • It works in firefox, what browser are you using? – Devon Jun 10 '16 at 16:18

0 Answers0