How to change div background when hovering mouse over image?

Question

I have a thumbnail inside a div. I use a different image as the background for the div so that it creates a thumbnail. I need to change the position of the background image from the bottom center to the top center when I click on the thumbnail.

Here is the html:

<div class="image">
   <a class="zoom1" title="Sample title" href="images/xyz-large.jpg"><img src="images/portfolio-xyz.jpg" alt="XYZ Inc" /></a>
</div>

Here is the css:

div.image     { width: 314px; height: 231px; background: url(images/bg_portfolio-img.png) no-repeat bottom center; }
div.image img { position: relative; top: 8px; left: 8px; }

I would like to do this with css only, and it would be something like this:

div image a.zoom1:hover  { background-position: top center;}

However, this clearly does not work. I am open to jQuery solution, but I also need some help.

Thanks in advance for your help!

Answer 1

Try something like this with .hover():

$(".image img").hover(function() {
  $(this).closest(".image").css({ 'background-position': 'top center' });
}, function() {
  $(this).closest(".image").css({ 'background-position': 'bottom center' });
});

<img> class="image" div , , . .css(), , .

Answer 2

Javascript - .

CSS, div img . , img: hover.

Answer 3

css

(a) div,

div.image:hover { background-position: center top; }

• , ( , bg, div , a)
• , - IE6

jQuery

$(".image a").hover(function(){
  $(this).parent('.image').addClass('hover');
},function(){
  $(this).parent('.image').removeClass('hover');
});

css

div.image { background-position: center bottom; }  //normal
div.hover { background-position: center top; } //override

jQuery

1

.hover ,

div#some-holding-div div.hover {...}

I'm sure there is some holding div in your markup

2

Alternatively, you can set the css properties directly from jQuery (instead of adding a class and deleting a class, you can just install nackgroundPositionand install it back)

note

It’s just out of my head, maybe, given the best fit for your needs - and it has not been tested.