CODEWITHSUNDEEP
csshtmltexthover
Cody Capella
Cody Capella

Reputation: 142

Having a div's background image change (using CSS) with text positioned on top of the div?

I have a question regarding some CSS that I'm sure has a simple solution, but just not obvious enough for me to find it yet.

I have a div defined in my HTML file with a background image, which I set in my CSS file. I then set a hover state for the div using CSS so that the background image would change on mouse over. I then placed text on top of the div in my HTML file, to make a button with text on it.

Here is where I run into my problem, however - when I mouse over the image (background image of the div), the image changes, but when my cursor hits the text on top of it, the hover state changes back to the regular one, changing the background image as well, while the text doesn't change. When I move the cursor away from the text, it changes back to the hover state.

I have the code set up in a JSFiddle at http://jsfiddle.net/Cwca22/jk7ty/ - any help would be greatly appreciated! Thanks in advance!

Upvotes: 0

Views: 1919

Answers (4)

Ken
Ken

Reputation: 36

I would keep all of the HTML in the HTML section and the CSS in the CSS section. This just helps with keeping it all straight especially when you are testing.

This will give you a good result:

<a href="directions.html"><div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div></a>

#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-   button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}

.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor:     }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}

If you use this code style you can make changes to your element sizes without having to rework the centering of the text.

Upvotes: 1

nerdburn
nerdburn

Reputation: 712

I rewrote and simplified it for you and it works now:

Here's the link:

<a href="directions.html" class="getDirections">Get Directions</a>

Here's the CSS:

a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
    background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-    hover.png') no-repeat top left;
}

A few things to note:

  • You can treat an A tag like a div if you give it a display: block; property
  • Since I put 12px padding on the top, I subtracted 12px from the height: property to leave only 30px (the button is actually 42px high)
  • I suggest reading about the "box model" (google it) to help out in future

You can also check it out on JSFiddle if you like:

http://jsfiddle.net/nerdburn/95ysC/

Upvotes: 1

benesch
benesch

Reputation: 5269

You can really simplify your code.

HTML

<a class="button" href="directions.html">Get Directions</a>

CSS

a.button {
    background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
    color: white;
    display: block;
    font-family: Ovo, serif;
    font-size: 18px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    width: 135px;
}

a.button:hover {
    background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
    color: #fff;
}

:hover only applies when you are hovering over that element or one of it's children. You created the button with one element, and then created the text and used CSS trickery to position it over the button. As soon as you hover over the text, the browser thinks you're no longer hovering over the button, and drops the new background.

Also, styles cascade. So in the rules for :hover, you need only specify the attributes that have changed. (In this case, background and color.)

fiddle: http://jsfiddle.net/jk7ty/10/

Upvotes: 2

Robert
Robert

Reputation: 3074

Move the Get Directions link inside the main div. You'll need to do some formatting for it but this should get you pretty close.

<a href="directions.html">
  <div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">  
    <h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
  </div>
</a>

Upvotes: 1

Related Questions