html, div, css - действие при наведении курсора и изменение фонового изображения - PullRequest
Новая
       24

html, div, css - действие при наведении курсора и изменение фонового изображения

2 голосов
/ 22 сентября 2009 
#logo
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}

Работает, но bg-image не меняется, когда над ним мышь, почему?

Ответы [ 6 ]

4 голосов
/ 22 сентября 2009

Что ж, непосредственная проблема заключается в том, что внутри #logo нет элемента <a>. Изменение вашего второго правила на целевой элемент исправит эту проблему: 

#footer a:hover
{
    background-image: url(../images/logo_h.png);
}

Редактировать:
Как было указано в комментариях:

Стиль первого правила должен быть применяется к элементу A и #logo DIV должен быть удален, так как он служит нет цели вообще.

Это действительно лучшее решение для вашей проблемы, поскольку оно уменьшит беспорядок и поможет предотвратить дальнейшие головные боли в будущем. ( спасибо @Julian за разъяснения )

2 голосов
/ 22 сентября 2009

Фоновое изображение изначально присвоено #logo. На: hover фоновое изображение ЯКОРА изменено. Таким образом, будет работать следующее: 

#logo a
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}
1 голос
/ 22 сентября 2009

Вы применили наведенное изображение к элементу <a>. В вашем div#logo.

нет элемента <a>.
0 голосов
/ 12 апреля 2011

Не проще ли использовать функции javascript onMouseOver и onMouseOut? 

<script type="text/javascript">
function divcolor(){ document.getElementById('div1').style.background='#FFDFA3'; }
function divcolor2(){ document.getElementById('div1').style.background='#FFFFFF'; }
</script>

<div id="div1" onmouseover="divcolor();" onmouseout="divcolor2();">Hover ME and I will highlight for you :)</div>

Я использовал цвета фона, но то же самое должно работать с изображениями.

0 голосов
/ 24 сентября 2009

Следует отметить, что вы не должны помещать элементы уровня блока внутри якоря, который является встроенным элементом, который вы можете установить для отображения блока. Правильная иерархия должна быть что-то вроде div#footer > a > span#logo с соответствующей CSS.

0 голосов
/ 22 сентября 2009

Вы можете стилизовать ваш div, чтобы иметь элемент привязки, а затем использовать a:hover: 

<div id="blah">
<p> <a href="#"></a></p>
</div>

Тогда ваш CSS 

#blah a:hover {
 background-image: url(myImage.jpg);
}
...