Изменение фонового изображения при наведении курсора <a> - PullRequest
Новая
       15

Изменение фонового изображения при наведении курсора <a>

1 голос
/ 01 июня 2011

Мне нужно разместить ссылку на изображение на моей веб-странице, когда они наводят курсор на изображение, я хочу, чтобы оно изменилось на другое изображение. У меня проблемы с этим.

Я эту строку в моем HTML: 

<a href="mailto:ellie@example.com?subject=test" id="somethingtosay-ballon" class="item"> hello</a>

Мои классы CSS: 

#somethingtosay-ballon
{   
    background-image: url(Images/button_email_upstate.png); 
    display:block;

    width:263px;
    height:167px;
    text-indent:-9999px; 
    position:absolute;
    top:643px;
    left:530px;


}
#somethingtosay-ballon .item:hover
{   
    background-image: url(Images/button_email_mouseover.png); 
    display:block;

    width:263px;
    height:167px;
    text-indent:-9999px; 
    position:absolute;
    top:643px;
    left:530px;

}

Может ли кто-нибудь сказать мне правильный способ сделать это?

Ответы [ 3 ]

2 голосов
/ 01 июня 2011

Весь второй селектор должен быть 

#somethingtosay-ballon:hover
{   
    background-image: url(Images/button_email_mouseover.png); 
}

Вам не нужно повторять все дублированные правила, и вам не нужно включать .item в селектор.Вы можете добавить псевдокласс :hover непосредственно в селектор #id.

1 голос
/ 01 июня 2011

Если вы хотите изменить фон somethingtosay-ballon, попробуйте

#somethingtosay-ballon:hover

1 голос
/ 01 июня 2011

Убрать пробел между #somethingtosay-ballon и .item:hover.Должно быть: 

#somethingtosay-ballon.item:hover
...