How to change the color of a link when passing the mouse (mouse)?

Asked

Viewed 9,311 times

2

I have a horizontal menu with the links (example): Home; About; Contacts;

The idea is that the home always has the green padding background and the rest of the links with white background. When you pass the mouse (mouse) over the other links the background changes color to green (li:).

  • 2

    Come on, David, come on. Edit your question and explain in detail what you need, what you already have, and if possible, use Jsfiddle (now you know how it works).

  • @Brunoaugusto I think I had it all. The problem was who edited it. It must have erased it. I don’t remember anymore.

  • David even without editing is not clear what the problem is.

1 answer

5


This is very basic, I suggest you study a little more about classes, and their properties, a good place to learn a lot is on the site W3schools.

Anyway, follow a small example:

CSS:

ul {
    list-style:none;
}
li {
    width: 100px;
    height:36px;
    line-height:36px;
    text-align: center;
    display:inline-block;
}
li:hover, .active {
    background-color:#00ff00!important;
}

HTML:

<ul>
    <li class="active">Home</li>
    <li>Produtos</li>
    <li>Download</li>
    <li>Contatos</li>
</ul>

Jsfiddle

  • brasofilo is almost here. The idea is that home never be without green. Know how to do it? Thanks for the reference.

  • 1

    @David edited the answer and the jsfiddle and fixed the asset to stay fixed, particularly I think it’s kind of weird like this...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.