Смена фона изображения div (с использованием CSS) с текстом, расположенным поверх div?

Question

У меня есть вопрос, касающийся какого-то CSS, который, я уверен, имеет простое решение, но пока не достаточно очевидный, чтобы найти его.

У меня есть div, определенный в моем HTML-файле с фоновым изображением, которое я установил в своем CSS-файле.Затем я установил состояние наведения для div, используя CSS, чтобы фоновое изображение могло меняться при наведении курсора мыши.Затем я поместил текст поверх div в моем HTML-файле, чтобы создать кнопку с текстом на нем.

Здесь я сталкиваюсь с проблемой - однако, когда я наводю курсор мыши на изображение (фоновое изображение div), изображение меняется, но когда мой курсор касается текста поверх него, состояние наведения мышивозвращается к обычному, изменяя также фоновое изображение, в то время как текст не изменяется.Когда я перемещаю курсор от текста, он возвращается в состояние наведения.

У меня установлен код в JSFiddle со значением http://jsfiddle.net/Cwca22/jk7ty/ - любая помощь будет принята с благодарностью!Заранее спасибо!

Answer 1

Вы действительно можете упростить свой код.

HTML

<a class="button" href="directions.html">Get Directions</a>

CSS

a.button {
    background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
    color: white;
    display: block;
    font-family: Ovo, serif;
    font-size: 18px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    width: 135px;
}

a.button:hover {
    background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
    color: #fff;
}

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

Кроме того, каскад стилей.Таким образом, в правилах для :hover вам нужно только указать атрибуты, которые изменились.(В данном случае background и color.)

скрипта: http://jsfiddle.net/jk7ty/10/

Answer 2

Я бы сохранил весь HTML в разделе HTML и CSS в разделе CSS.Это просто помогает сохранить все как есть, особенно когда вы тестируете.

Это даст вам хороший результат:

<a href="directions.html"><div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div></a>

#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-   button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}

.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor:     }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}    

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

Answer 3

Я переписал и упростил его для вас, и теперь он работает:

Вот ссылка:

<a href="directions.html" class="getDirections">Get Directions</a>

Вот CSS:

a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
    background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-    hover.png') no-repeat top left;
}

Несколько замечаний:

• Вы можете рассматривать тег A как div, если вы даете ему display: block; свойство
• Так как я поместил отступ в 12 пикселей сверху, я вычел 12 пикселей из свойства height: оставить только 30 пикселей (кнопка на самом деле имеет высоту 42 пикселя)
• Я предлагаю почитать про «модель коробки» (Google google), чтобы помочь в будущем

Вы также можете проверить это на JSFiddle, если хотите:

http://jsfiddle.net/nerdburn/95ysC/

Answer 4

Переместить ссылку Get Directions внутри основного div. Вам нужно будет отформатировать его, но это должно быть довольно близко.

<a href="directions.html">
  <div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">  
    <h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
  </div>
</a>