CODEWITHSUNDEEP
htmlcsshover
Jacinto
Jacinto

Reputation: 558

Can I change an image on hovering over an element, without using JavaScript?

Is it possible to do something like this except as a sprite, only using css/html?

Excuse the poor example. I am just trying to figure this out.

Example

Upvotes: 0

Views: 336

Answers (3)

Kelly Cook
Kelly Cook

Reputation: 1261

Yes, you can do this with a sprite. You will just need to change the background position for the hover rule.

.link {
   background-image: url('sprite.png');
   background-position: 0 0;
}

.link:hover {
   background-position: 0 -10px;
}

Upvotes: 0

Guffa
Guffa

Reputation: 700152

Yes, you just put the two images together into one, and use the background-position style to change what part of the image is shown.

I applied it to your example, but I just use the top and bottom half of one of the images:

http://jsfiddle.net/Guffa/Lx4tp/2/

HTML:

<a class="link">Buy Now<a/>

CSS:

.link {
   width:100px;
   height:12px;
   background: #fff url('http://server2.iconfinder.com/data/icons/prettyoffice/24/add1-.png') no-repeat right 0;
   display:block;
}

.link:hover {
    background-color: #f4f4f4;
    background-position: right -12px;
}

Upvotes: 2

JStark
JStark

Reputation: 2788

Are you trying to create a hover or something more? http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

Upvotes: 0

Related Questions