Кнопка, изменяющая свой цвет
при наведении на нее курсора
Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type="button"). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.
Собственно вот так выглядит пример работы рассматриваемого скрипта:
Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:
<script type="text/javascript">
function color_button(x) {
if ("INPUT"==event.srcElement.tagName) event.srcElement.className=x;
}
</script>Далее необходимо добавить форму, содержащую кнопки, цвет которых планируется менять, следующим образом:
<form name="primer" align="center" onmouseover="color_button('start')"
onmouseout="color_button('')">
Наведите курсор мыши на одну из кнопок!<br>
<input type="button" value="Кнопка № 1">
<input type="button" value="Кнопка № 2">
<input type="button" value="Кнопка № 3">
</form>Еще не забудьте вставить в заголовок странички (между тегами <head> и </head>) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:
<style type="text/css">
.start { color: yellow; background: green; }
</style>В результате у Вас все кнопки, описанные, как показано Выше, должны изменять свой цвет, при наведении на них курсора мышки.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
.class:hover {background-color: #цвет;}