Блог

Главная - Вопросы по программированию - Как заставить изображение или кнопку светиться при наведении курсора мыши с помощью javascript или jquery?

Как заставить изображение или кнопку светиться при наведении курсора мыши с помощью javascript или jquery?

#javascript #jquery #html #css #effect

#javascript #jquery #HTML #css #эффект

Вопрос:

Я хочу добавить эффект свечения при наведении курсора мыши на кнопку или изображение. Как мне сделать это с помощью javascript, jquery или CSS? Вот пример того, как я хочу, чтобы это выглядело http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

Кто-нибудь может дать мне какой-нибудь пример кода?

Заранее спасибо

Ответ №1:

Если вы не возражаете против ориентации на современные браузеры, вы можете использовать CSS-переходы и свойства box-shadow, JS не требуется.

Посмотрите этот сайт здесь:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Прокрутите вниз, пока не увидите «Затухание» и «Отражение»)

Демонстрация здесь:http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

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

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

Ответ №2:

Никогда не бывает плохого времени для публикации радиоактивных кнопок, которые являются чистым CSS3. Правда, только в браузерах Webkit (например, Chrome и Safari). Вот модифицированная версия, которая просто светится при наведении курсора, что гораздо меньше отвлекает:

 @-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 0 #333; }
  to { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
}

a.green.button {
  background-color: #749a02;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
}

a.green.button:hover {
  background-color: #91bd09;
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-box-shadow: 0 0 18px #91bd09;
}

<a href="#" class="green button">Click Me</a>

Демонстрация jsFiddle. Это должно упростить задачу, поскольку все больше браузеров используют его, но до тех пор это всего лишь дополнение к решениям на основе JavaScript.

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

1. Это можно легко расшифровать и для других браузеров.

2. Я простой пользователь SO, я вижу код, а не ответ только по ссылке, я поддерживаю! : p

Ответ №3:

Вот довольно хороший пример jQuery и код:

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Ответ №4:

Используя CSS, вы также можете добиться того же:

HTML

  <img class="opacity_img" src="image.png" alt="" />

CSS для IE:

  .opacity_img{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
 .opacity_img:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }

CSS для других браузеров:

  .opacity_img{
  opacity: 0.45;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
 }

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

1. это именно то, что я искал

Ответ №5:

лайза дала отличный ответ — эффект, достигнутый всего за несколько строк кода.

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

  .opacity_img{
  opacity: 0.45;
  transition: opacity 0.5s;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
  transition: opacity 0.5s;
 }