Geek Answers Handbook

How to make full color change color on hover using css?

I have the following:

<div id="side-menu" class="sidebar-nav span2"> <div class="sidebar-link"><span>Link 1</span></div> <div class="sidebar-link"><span>Link 2</span></div> </div>

I am trying to get each of the two divs to change color when you hover over them - do you hover over the text to the right or left of the text. Currently, color changes only when you hover over text. Any idea how this can be done? Here is my fiddle with css:

http://jsfiddle.net/PTSkR/56/

+7
source share
2 answers

You have a place in the hover selector. It matters because space is a descendant selector in CSS

 div.sidebar-link :hover{ background-color: #E3E3E3; }

This means that it is affected only by the hanging descendants of .sidebar-link . Remove the space.

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

+20
source

You can easily achieve this with the following code: Link

 .cstDiv{ padding:10px; /* text-align:center may be used for a good look */ width:55px; } div.cstDiv:hover{ background-color:gray; color:white; cursor:pointer; /* you may delete this if you want */ } 
  <div> <div class="cstDiv">Link I</div> <div class="cstDiv">Link II</div> <div class="cstDiv">Link III</div> <div class="cstDiv">Link IV</div> </div>
0
source

More articles:


All Articles