html - unable to make a button in html and css

Question

I start with the plain old way of making a button.

<div id="button">
<a href="#"><img src="button.png"></a>
</div>

After that whenever someone hovers mouse over the button the image should change but it doesn't, relavant css is

#button a:hover
{
    background-image: url('button2.png');
}

What is wrong here ? why isn't the image on the button being changed in response to mouse hovering.

Answer 1

if you want to do it this way you have to set a background image in the first place. The button you are building actually contains an actual image tag and not a background-image.

So possible work around: Set button.png as background-image for the button like this:

#button a
{
    background-image: url('button.png');
    height: 20px; /* set to actual height of button image */
    width: 200px; /* set to actual width of button image */
}

and then for the hover state do:

#button a:hover
{
    background-image: url('button2.png');
}

Don't forget to set height and width of the #button a (set it to the dimensions of the image) otherwise it won't show.

Answer 2

您必须将代码更改为：

<div id="button">
<a href="#">&nbsp;</a>
</div>

并且，在 CSS 中：

#button
{
    width: /* image width goes here */px;
    height: /* image heightgoes here */px;
}
#button a
{
    display:block;
    background-image: url('button.png');
    text-decoration:none;
}
#button a:hover
{
    background-image: url('button2.png');
}

---

出于 SEO 的目的，您还可以在 中写入文本<a>，例如：

<div id="button">
<a href="#">Title of the link</a>
</div>

然后以这种方式隐藏它：

#button
{
    overflow:hidden;
    text-indent:-999px;
    width: /* image width goes here */px;
    height: /* image heightgoes here */px;
}

或者这样：

#button
{
    overflow:hidden;
    width: /* image width goes here */px;
    height: /* image heightgoes here */px;
}
#button a
{
    ...other rules
    padding-left:/* a value higher than #button width */px;
}