HTML CSS hover button navigation

Question

Hello everyone. 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.

Please help me.

Answer 1

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.

Answer 2

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.

Answer 3

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.