CODEWITHSUNDEEP
htmlcss
mercuryfrost
mercuryfrost

Reputation: 79

Background Image to appear on Hover

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!

Upvotes: 3

Views: 1611

Answers (3)

Jeffrey Blake
Jeffrey Blake

Reputation: 9699

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.

Upvotes: 1

mohana rao
mohana rao

Reputation: 429

#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}

Upvotes: 0

Itai Sagi
Itai Sagi

Reputation: 5615

you just need to change it the following way:

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

no whitespace between 'url' and the actual url

Upvotes: 0

Related Questions