Блог

Главная - Вопросы по программированию - Эффект наведения CSS

Эффект наведения CSS

#css

#css

Вопрос:

Мне нужно показать дополнительное изображение, как только пользователь наведет курсор мыши на кнопку. Как бы вы обошлись без этого в идеале, просто используя CSS.

Вы можете видеть, что именно мне нужно, на изображении ниже, когда пользователь наводит курсор на кнопку брошюры, появляется кнопка просмотра брошюры.

введите описание изображения здесь

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

1. Краткий ответ .button:hover .view-brochure {display:block} Нам действительно нужен html

Ответ №1:

если вы можете поместить элемент внутри наведенного объекта только с помощью css, вы можете сделать это следующим образом:

здесь можно подправить:http://jsfiddle.net/Q67hB

HTML:

 <div id="one">all the time
    <div id="two">only on hovering one</div>
</div>

css:

 #two{
  display: none;  
}
#one:hover #two{
  display: block;
}

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

1. спасибо за ваш простой в использовании и хорошо объясненный ответ 🙂 Ценю

Ответ №2:

В CSS

 button:hover {
    background-image: url(someImage.png);
}

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

1. Я не очень хорошо помню, но я думаю, что это не (всегда) работает в Internet Explorer. Так что вы должны хорошо его протестировать!

2. Помимо этого, другой ответ лучше, особенно для позиционирования и воспроизведения.