CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Suhail Gupta
Suhail Gupta

Reputation: 23276

Changing the color when mouse hovers over nav

How do I change the color of the menu-bar when mouse hovers over the menu-item?enter image description here

Upvotes: 0

Views: 140

Answers (1)

jbutler483
jbutler483

Reputation: 24559

So, in order to make this 'hover' effect, you should make use of css's :hover, allowing you to set styling to an element / class/id when the mouse is hovered over it. And since you are talking about the background color, you can even make it transition nicely:

read more about :hover...

div{
  display:inline-block;
  background:gray;
  transition: all 0.8s; /*allows animation*/
  padding:10px;
  margin:5px;
  }

div:hover{
  background:lightblue;
  }
<div>hi. You could hover me</div><div>...or me</div>

Note

This is a generic pattern/way of styling elements. You can edit your css to be styled for hover effects on other elements;

elementTag:hover{}

classes;

.className:hover{}

id's;

#MyID{}

or 'other selectors';

.myParentClass:hover .myChild{}

for example, the above selector will change the child element if its parent is hovered.

There is also :active and :focus selectors which define rules when the selection is 'active' or 'focused', but this is more in line with text inputs.

As a side note; these css2.1's selectors are available for a LOT of browsers - so much so, even IE 7 supports it! So can be safely used on all websites :)

Documentation

Upvotes: 1

Related Questions