Невозможно изменить цвет фона только с помощью CSS - PullRequest
Новая
       25

Невозможно изменить цвет фона только с помощью CSS

1 голос
/ 12 октября 2011

Доброе утро,

Я пытаюсь изменить цвет фона ссылки, когда пользователь наводит на нее курсор. С моим текущим кодом цвет ссылки изменится, как и ожидалось, но не изменит цвет фона. Если я присоединяю псевдокласс к другому тегу, скажем «SPAN», то все работает как надо. Я естественно подозреваю, что виноват тег «А», но я не могу понять это вообще. Смотрю на это с прошлой ночи. Разметка: 

    <div id="thumbAboutWrap">
        <h4 class="contact">ADAM [AT] LAYEREDFEEDBACK [DOT] COM</h4>
        <a class="contact" href="#"><h4>FACEBOOK</h4></a>
        <a class="contact" href="#"><h4>LAST.FM</h4></a>
        <a class="contact" href="#"><h4>LINKEDIN</h4><a/>
    </div><!--thumbAboutWrap-->

CSS: 

a.contact {
font-size:50px;
font-weight:800;
}

a.contact:hover {
background-color:#000;
color:#FFF;
}

Я также использую сброс Мейера, если это имеет значение. До сих пор это было без проблем.

Ответы [ 2 ]

1 голос
/ 12 октября 2011

Проблема заключается в тегах <h4>, которые есть внутри тегов <a>. Вы стилизуете <a>, а не <h4>.

Два решения:

Во-первых, полностью удалите теги <h4>. Это решит проблему, и, честно говоря, эти теги <h4> действительно не нужны (вы все равно устанавливаете размер шрифта для <a>).

В качестве альтернативы, если вы хотите сохранить разметку как есть, вам нужно добавить h4 к вашим стилям (особенно к стилю наведения), например: 

a.contact:hover h4 {
  background-color:#000;
  color:#FFF;
}

Надеюсь, это поможет.

[EDIT]

Демонстрацию различий, добавляемых h4 к селектору при наведении, можно увидеть здесь: http://jsfiddle.net/C7UKp/

0 голосов
/ 12 октября 2011

попробуйте добавить это к вашему css

a.contact {
font-size:50px;
font-weight:800;
display: block;
overflow: hidden;
margin-bottom: 5px;
}

http://jsfiddle.net/Xk7Jp/1/

...