Блог

Главная - Вопросы по программированию - Изменение фонового изображения при наведении курсора мыши в теге

Изменение фонового изображения при наведении курсора мыши в теге

#html #css #hover

#HTML #css #наведите

Вопрос:

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

Я эту строку в моем 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;

}

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

Ответ №1:

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

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

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

Ответ №2:

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

 #somethingtosay-ballon.item:hover

Комментарии:

1. #somethingtosay-ballon это уже класс .item . Разве это не излишне?

2. В качестве пояснения #id.class сопоставляет элементы как с идентификатором, так и с классом; #id .class сопоставляет подэлементы #id с классом .class .

3. Класс @Dutchie #somethingtosay-ballon" has the item`, но этот ответ не «добавляет» класс, он использует его только как селектор. Ваше использование «уже» здесь не имеет смысла.

4. Неверно, #somethingtosay-ballon:hover это то же самое, что #somethingtosay-ballon.item:hover , поскольку объект также имеет этот идентификатор в качестве класса.

5. Да, это то же самое. Поскольку вы используете идентификатор для выбора этого узла, должно быть только одно совпадение, и поэтому item класс не нужен в этом селекторе.

Ответ №3:

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

#somethingtosay-ballon:hover