Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
25 / 9 / 17
Регистрация: 22.12.2015
Сообщений: 2,097

Изменить изображение у кнопок при наведении

30.03.2017, 23:54. Показов 1252. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Эффект перекатывания</title>
  <style>
   a.rollover {
    background: url(b1.jpg); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 75px; /* Ширина рисунка в пикселах */
    height: 75px; /* Высота рисунка */
   }
   a.rollover:hover {
       background: url(b2.jpg); /* Путь к файлу с исходным  рисунком */
   }
  </style>
 </head>
  <body>
   <p><a href="https://vk.com/poletbabochki" class="rollover"></a></p>
 
 </body>
</html>
Так работает для одной кнопки,она при наведении меняеться др картинкой и можно перейти по ссылке.
А как сделать,если у меня несколько кнопок?

 Комментарий модератора 
На каждый вопрос создавайте по одной теме! (Правила п.4.4)
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
30.03.2017, 23:54
Ответы с готовыми решениями:

При наведении на изображение,изображение должн немного затемнится и + по центру изображения треугольник
Вот допустим у меня 3 картинки: нужно чтоб при наведении на любую из них,затемнялось и картинка треугольника была по центру как тут: ...

Рамка при наведении на изображение - изображение скачет, как сделать, чтобы они не изменяли позицию?
Хочу сделать рамку при наведении на изображение, но изображение скачет, как сделать, чтобы они не изменяли позицию? ...

Как изменить цвет выделения кнопок при наведении мыши
Подскажите как изменить цвет выделения кнопок при наведении мыши в приложении WPF???

5
 Аватар для Alexodiy
6 / 6 / 2
Регистрация: 22.02.2017
Сообщений: 125
31.03.2017, 01:07
просто добавить всем кнопкам класс class="rollover". Кстати, если вы делаете кнопки картинками, то лучше делать их из одной картинки, то есть спрайтом, а через background-position прописывать ховер. В вашем случае, та кнопка, которая должна отображаться при наведении загружается в тот момент, когда на кнопку наводят курсор и она появляется не сразу. В случае с спрайтом изображение уже подгружено.
0
25 / 9 / 17
Регистрация: 22.12.2015
Сообщений: 2,097
31.03.2017, 01:26  [ТС]
У меня есть одна кнопка красного цвета и на ней белая надпись.Как мне сделать при наведении эту кнопку серой без подгрузки такой е кнопки толькой серой.Может есть програмнные средства.Можно пример.
0
6 / 6 / 2
Регистрация: 05.03.2017
Сообщений: 118
31.03.2017, 03:29
[del]

 Комментарий модератора 
Не отсылайте других пользователей в поиск. Самостоятельно найдите ответ на вопрос и разместите его на форуме. (Правила п.3.3)
0
24 / 24 / 12
Регистрация: 01.03.2017
Сообщений: 93
31.03.2017, 04:49
Скорее всего эту красную кнопку можно сделать не картинкой, а с помощью css. И менять ей свойства css при наведении на серый фон и то, что нужно.
0
 Аватар для Alexodiy
6 / 6 / 2
Регистрация: 22.02.2017
Сообщений: 125
31.03.2017, 09:27
scherbakovss201, скиньте кнопку, загрузите ее сюда, напишем без картинки

Добавлено через 21 минуту
Вот вам простая кнопка

HTML5
1
<a href="#" class="main-btn">Кнопка</a>
CSS
1
2
3
4
5
6
7
8
9
10
    .main-btn {
    background: #fb1212;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    }
 
    .main-btn:hover {
    background: #909090;
    }
Вот кнопка с эффектом в более приятном стиле, с выезжающей стрелкой

HTML5
1
<a href="#" class="main-btn-2">Красивая кнопка</a>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    .main-btn-2 {
    font-size: 18px;
    background: #ff5273;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.3em 1em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 20px;
    line-height: 1.7em;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    color:#fff;
    font-family: "Open Sans", Arial, sans-serif;
    }
 
    .main-btn-2:after {
        position: absolute;
        margin-left: -1em;
        opacity: 0;
        font-size: 32px;
        line-height: 1em;
        content: ">";
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }
    .main-btn-2:hover {
        background: #909090;
        padding: 0.3em 2.6em 0.3em 1em;
    }
 
    .main-btn-2:hover:after {
        margin: 1px 0px 7px 8px;
        opacity: 1;
    }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
31.03.2017, 09:27
Помогаю со студенческими работами здесь

Как изменить фоновое изображение кнопки при наведении на нее курсора мыши?
Приветствую всех!:thank_you: Есть 2 изображения (монохромное и цветное). По умолчанию на кнопке стоит фоновое монохромное изображение....

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

Появление рамки и кнопок при наведении
Здравствуйте знатоки, в и-нете увидел один плагин,и стало интересно где бы взять такой?сам написать не смогу.. Сам плагин можно посмотреть...

При наведении на слайдер увеличить прозрачность кнопок
Добрый день, нужна помощь. Есть слайдер, нужно сделать, чтобы при наведении на слайдер увеличилась прозрачность на обе кнопки- предыдущая...

Изменение фокуса кнопок, при наведении на них курсора
Я решил использовать Bitmap Button в своем проекте, но в отличие от стандартных кнопок, они не подсвечиваются, когда на них наводишь...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru