Question

I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn’t quite tweak the answers to work for me.

The HTML looks like

<div id="header_feedback">
    <a href="#contactForm">
        <img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
    </a>
</div>

the CSS then is

#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}

#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}

Any ideas hugely welcome!

Answer 1

The main problem here is not with your CSS. Itagi’s answer correctly identified the minor issue that you can’t have a space between url and the parens/address.

But there are two other bigger issues:

1. Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
2. Backgrounds applied to opaque images aren’t visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.