Как вы заставляете изображение или кнопку светиться при наведении мыши на javascript или jquery?
Я хочу добавить светящийся эффект, когда я наведу курсор мыши на кнопку или изображение. Как это сделать с помощью javascript, jquery или CSS? Вот пример того, что я хочу, чтобы это выглядело http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html
может кто-нибудь дать мне некоторые примеры кода?
спасибо заранее
5 ответов
Если вы не против таргетинга на современные браузеры, вы можете использовать CSS-переходы и свойства box-shadow, JS не требуется.
проверьте этот сайт here:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Прокрутите вниз, пока не увидите затухание и отражение)
демо здесь: http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html
никогда не плохое время в должности Радиоактивные Кнопки, который является чистым 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.
вот довольно хороший пример jQuery и код:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
используя 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;
}
Лиза дала отличный ответ-эффект достигнут только в нескольких строках кода.
но если вы хотите, чтобы он был более гладким, вы можете сделать переход непрозрачности длиться некоторое время, добавив:
.opacity_img{
opacity: 0.45;
transition: opacity 0.5s;
}
.opacity_img:hover{
cursor:pointer;
opacity: 1.0;
transition: opacity 0.5s;
}