показать фоновое изображение на мыши над

У меня есть на следующие HTML:показать фоновое изображение на мыши над

<a href="#" class="home-block" style="background-color:#464646; background-image:url('wardrobe.jpg')">Wardrobe</a> 
<a href="#" class="home-block" style="background-color:#6a0d1f; background-image:url('wine.jpg')">Wine</a> 
<a href="#" class="home-block" style="background-color:#291407; background-image:url('coffee.jpg')">Coffee</a>

Это отношение CSS:

.home-block { 
    background-color: #c2b89c; display: block; height: 180px; line-height:180px; 
    text-align: center; font-size: 70px; color:#e2e2e2; 
    text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover; 
    background-position: center center; box-shadow: 1px 1px 4px #111; 
}

Мой результат выглядит примерно так:

enter image description here

Это нормально, но я действительно хочу, чтобы блоки имели сплошной цвет и отображали только i мага на зависании. Как так:

enter image description here

Пожалуйста, имейте в виду, что я использую адаптивный дизайн, так что блоки будут иметь различное соотношение размеров и сторон на различных размеров экрана. Вот почему я использую background-size: cover. Также это для системы CMS, поэтому я хочу, чтобы изображения и цвета были установлены встроенными в HTML, поэтому они будут легко редактироваться и могут быть добавлены дополнительные блоки.

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

То, что я попытался это:

.home-block { background: none; } 
.home-block:hover { background: inherit }

, но без успеха. Я как раз собирался исправить все это с помощью некоторых строк jQuery, но мне просто захотелось проверить, нет ли чистого способа CSS для этого.

источник

2013-03-17 Jules Colle

Вы ищете что-то вроде этого? http://jsfiddle.net/ExplosionPIlls/R7anj/ –

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

В чем разница между обновлением таблицы стилей и встроенным текстом html? –

Это немного сложно, если вам нужно установить background-image встроенный в HTML. Вы не можете легко перезаписать его. Что я хотел бы попытаться сделать, это изменить background-position по наведению:

.home-block { 
    ... 
    background-position: 1000px 1000px; // background-image is there but not visible 
} 
.home-block:hover { 
    background-position: center center !important; // make it visible 
}

http://jsfiddle.net/h2Jbg/

Таким образом, для нормального состояния вы не увидите фоновое изображение, но будет видеть Backgroud цвет. При наведении вы перемещаете изображение назад.

источник

2013-03-17 15:32:18 dfsq

Так просто и очевидно! Именно то, что я искал. Спасибо за это очень чистое решение. :) –

К сожалению, невозможно использовать псевдо-класс :hover, что затрудняет выполнение этого встроенного в один элемент.

Очень часто уродливо использовать дополнительный элемент с целью стилизации, но по крайней мере это возможное решение проблемы.

<div style="background-image: url(http://lorempixel.com/400/200);"> 
    <div class="home-block">Foo</div> 
</div>

Вы могли бы использовать что-то вроде этого в вашем CSS:

.home-block:hover { 
    background: transparent; 
}

Demo

Таким образом, вы будете иметь возможность добавлять новые блоки с отдельными фон-изображениями, не обновляя таблицы стилей.

источник

2013-03-17 15:37:24

очень красивое и остроумное решение. Но я думаю, что решение dfsq - это всего лишь крошечный чище. вы заслуживаете повышения, не тем меньше! –

+1 Очень умное решение. – dfsq

@dfsq Увидев ваше решение, я пошел бы за тобой. :) Очень умный и не требующий дополнительного элемента, который требует мое решение. –

показать фоновое изображение на мыши над

ответ

Смежные вопросы