HTML CSS hover button navigation

I am using an image button for navigation, because I want hover effects. I mean, I used button image instead of <ul> tag or <div> tag because I want hover effects, meaning when I hover on that image the image changes. That's why I use image button.

But, I do not want to use images. I want to use <ul> tag and <div> tag but I am not familiar with how to do hover effect on those tags开发者_如何学JAVA.

Please help me.

You need to use CSS to do this. If you wish to have a list of buttons, then I strongly suggest you use a ul parent element and then li child elements. Don't use divs inside the ul.

<ul>
    <li id='button1'>Button 1</li>
    <li id='button2'>Button 2</li>
</ul>

#button1 {background-image: url(IMAGE PATH GOES HERE)}
#button1:hover {background-image: url(HOVER IMAGE PATH GOES HERE)}

The CSS property background-image places whatever image you specify in IMAGE PATH GOES HERE as the background for that element. The :hover pseudo-selector allows you to alter an image when the user hovers it with their mouse. In this case, we are providing a different image path effectively altering the image when the li is hovered.

In case you are not familiar with CSS, you can learn more about it here.

All modern browsers can render :hover CSS selector on every element. You just have to change background-image properties for your <ul> tags then.

But there are many possibilities with javascript, jquery and so on, which will enable you to use it in every browser.

Not sure if I understand but if I do it's this:

ul:hover
{
background-color: #f00;
}

or

div:hover
{
background-color: #f00;
}

About as good an answer I can give considering the question.