Изменить фон родительского div на hover

У меня есть этот код:

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

Изображение центрировано в середине div, как я могу изменить фон div при наведении на изображение?

Я знаю только, как изменить свойства изображения, когда я наводил курсор на div.

Предпочитаете не использовать jQuery, но не против слишком много.

Спасибо!

Ответ 1

Вы не можете. CSS не имеет никакого способа выбрать "родительский элемент":

http://snook.ca/archives/html_and_css/css-parent-selectors

Предпочитаете не использовать jQuery, но не обращайте особого внимания.

Использование: http://jsfiddle.net/KHc6X/

$('.thumb_image_holder_orange > img').hover(function(){
    $(this).parent().toggleClass('hover');
})

Ответ 2

Селектора CSS не могут подняться, поэтому вам нужно будет использовать JavaScript.

Вы отметили его jquery, чтобы здесь является ответом jQuery.

$('.thumb_image_holder_orange img').mouseover(function() {
    $(this).parent().css('backgroundImage', 'url(/whatever/you/want.png)');
});

Ответ 3

Решение. Решение состоит в использовании Абсолютного позиционирования. См. Ниже фрагмент. Добавление идентификатора "orangeImg" облегчает жизнь!

Создайте держатель div с относительным позиционированием. Внутри этого div разместите свои "orangeImg" и "orangeBG" div. Оба будут иметь позиционирование абсолютного. Для символа orangeBG также должны быть заданы свойства ширины и высоты, так как они не будут содержать никаких элементов. Используя свойство z-index, вы сложите div, а div вверху.

Добавляя класс .target к элементу orangeBG div, вы можете затем использовать селектор "~", чтобы выбрать любого дочернего элемента orangeImg div при наведении. Единственный родной брат здесь - оранжевый. Поэтому фон изменится, только когда изображение зависнет! JSfiddle здесь

Желаем удачи,

Алан

#holder {position: relative; width: 200px; height:100px;}
#orangeImg {position:absolute; top:10px; right:10px; z-index:9999;}
#orangeBG {position:absolute; top:0px; right:0px; z-index:1; background-color:#353;width: 200px; height:100px;}
#orangeImg:hover ~ .target {background-color:#621;}

<div id="holder">
  <div id="orangeImg" class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" />
  </div>
  <div id="orangeBG" class="target">
  </div>
  
</div><!-- end holder -->

Ответ 4

Вы не можете сделать это в CSS.

Как насчет стандартного JavaScript, а не JQuery?

<div class="thumb_image_holder_orange">
    <img src="http://dummyimage.com/114x64/000/fff.png" onmouseover="this.parentNode.style.backgroundColor = '#f00'" onmouseout="this.parentNode.style.backgroundColor = '#fff'" />
</div>

Ответ 5

Следующий сниппет должен выполнить задание:

$('.thumb_image_holder_orange > img').hover(function() {
    $(this).parent().css('background-color', '#f00');
});

Ответ 6

Если вы можете добавить фиктивный элемент, смежный с изображением, то это можно сделать, используя этот чистый трюк CSS2, в результате чего этот пример скрипта.

Разметка:

<div class="thumb_image_holder_orange">
    <div></div>
    <img src="http://dummyimage.com/114x64/000/fff.png" />
</div>

Таблица стилей:

.thumb_image_holder_orange {
  background: orange;
  position: relative;
}
.thumb_image_holder_orange:hover {
  background: red;
}
.thumb_image_holder_orange div:hover {
  background: orange;
}
.thumb_image_holder_orange img {
  position: absolute;
}