Как изменить фон div, когда наведу курсор мыши на картинку?

Question

У меня есть уменьшенное изображение внутри div. Я использую другое изображение в качестве фона для div, чтобы он обрамлял миниатюру. Мне нужно иметь возможность менять положение фонового изображения от нижнего центра к верхнему центру при наведении курсора мыши на миниатюру.

Вот 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>

Вот 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; }

Я хотел бы сделать это только с помощью CSS, и это было бы что-то вроде этого:

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

Однако это, очевидно, не работает. Я открыт для решения jQuery, но мне также потребуется некоторая помощь.

Заранее спасибо за помощь!

Answer 1

Javascript - это простой способ.

Если вы хотите сделать это только с помощью CSS, вы можете полностью удалить дополнительный div, добавить фоновое изображение в img и просто добавить его отступ. Таким образом, вы можете просто изменить положение фона в img: hover.

Answer 2

Попробуйте что-то подобное, используя .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 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 note

1

, если .hover слишком расплывчато, используйте

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

Я уверен, что в вашей разметке есть какой-то элемент div

2

Кроме того, вы можете установить свойства CSS прямо из jQuery (вместо добавления класса и удаления класса вы можете просто установитьnackgroundPosition и установите его обратно)

note

Это просто от макушки моей головы, вероятно, может быть адаптировано под ваши нужды - и это не было проверено.