Наведите курсор на кнопку «стиль» для детей.

Question

Когда кто-то нависает над кнопкой с элементом img внутри, он должен иметь красный цвет фона.

<button class="btn-img"> 
    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg/220px-Burj_Al_Arab,_Dubai,_by_Joi_Ito_Dec2007.jpg" alt="Dubai" /> 
</button> 


.btn-img { 
    display: block; 
    width: 160px; 
    height: 120px; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    cursor: pointer; 
} 

.btn-img:hover { 
    background-color: red; 
} 

.btn-img:hover img { 
    background-color: blue; 
} 

http://jsfiddle.net/28QEM/

Возможно ли это? Это из-за элемента кнопки, потому что если дочерний элемент внутри div имеет фоновый цвет, а цвет фона родителя меняется, он в основном перезаписывает цвет фона для детей.

Answer 1

Вот один из возможных способов получения эффекта, который вы хотите:

<button class="btn-img"> 
    <div class="img-wrap"> 
    <img src="image_name.jpg" /> 
    </div> 
</button> 

и CSS может выглядеть следующим образом:

.btn-img { 
    display: block; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    cursor: pointer; 
    background-color: white; 
    outline: 1px dotted blue; 
} 
.btn-img .img-wrap { 
    margin: 10px; 
} 

.btn-img img { 
    display: block; 
} 

.btn-img:hover .img-wrap { 
    background-color: black; 
} 

.btn-img:hover img { 
    opacity: 0.8; 
} 

Как это работает

Итоговое изображение с другим <div>, чтобы вы могли более точно управлять полями и отступом и дать вам крючок для управления фоном col или за изображением, без разлива цвета вне самого изображения.

При запуске .btn-img:hover измените цвет фона div.img-wrap на черный и измените непрозрачность изображения на 0,8. Это приводит к потемнению изображения.

Вы можете поэкспериментировать с эффектом, попробовав разные цвета фона для элемента обертки изображения и степени непрозрачности.

Я думаю, что это может работать в IE7, но попробуйте.

Fiddle: http://jsfiddle.net/audetwebdesign/8QMTv/

И кстати ...

Если вы оберточной изображение со ссылкой, чтобы использовать некоторый тип JavaScript масштабирования вида эффекта (highslider, например), вы может заменить <div class="img-wrap"> на простой тег <a> и установить его display: block.

Имейте в виду ...

Браузеры, как правило, стиль <button> в отличие от других встроенных элементов, таких как <span>, так как свойства поля и отступы могут вести себя немного иначе, чем вы могли бы ожидать.