Не работает событие hover();
На сайте есть форма обратной связи с checkbox поверкой от спама.
Если выбран чекбокс, то нужно чтобы при наведении на кнопку оправить менялся её фоновый цвет. Помогите разобраться почему не работает.
var result=$('input[type="checkbox"]').prop("checked");
if (result==true) {
$('input [type="submit"]').hover(
function() {
$(this).css({'background':'black'});
},
function () {
$(this).css({'background':'black'}).remove();
}
)
};
|
maxg5,
почему строка 2 не в строке 5? |
maxg5,
$(function() {
var result = $('input[type="checkbox"]');
$('input[type="submit"]').hover(function() {
if (result.prop("checked")) $(this).css({
"background": "black"
})
}, function() {
$(this).css({
"background": ""
})
})
});
|
А если нужно добавить не css свойство, а класс.
Как правильно будет? У меня вот что получилось. Но не работает.
$(function() {
var result = $('input[type="checkbox"]');
$('input[type="submit"]').hover(function() {
if (result.prop("checked")) $(this).addClass("hover_b");
}, function() {
$(this).removeClass("hover_b");
})
});
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hover_b {
background-color: #FF00FF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var result = $('input[type="checkbox"]');
$('input[type="submit"]').hover(function() {
if (result.prop("checked")) $(this).addClass("hover_b");
}, function() {
$(this).removeClass("hover_b");
})
});
</script>
</head>
<body>
<input type="checkbox">
<input type="submit">
</body>
</html>
|
Если разместить css класс в <head></head> то у меня тоже работает.
Я не до конца объяснил вопрос. У меня стили в файле style.css активной темы сайта. Сайт на WordPress. Можно как то брать стили из style.css файла? |
maxg5,
расположение style.css никак не влияет на скрипт. проблема скорее в том что нет $ на момент работы скрипта, попробуйте заменить все $ на jQuery |
Цитата:
Есть еще варианты? |
maxg5,
делайте пример или ждите телепата |
рони,
Если делаю пример, все работает. А на самом сайте не работает скрипт. Причем не один скирпт с сайта не работает со стилями из style.css. Не знаю где искать ошибку. В WP? |
maxg5,
дай ссылку на сайт |
http://www.kuchenkov-sergey.myjino.ru
В шапке есть кнопка "Заказать обратный звонок", которая открывает модальное окно. Если в этом окне чекбокс не выбран, то при наведении на кнопку отправить ничего не должно происходить.А если выбран то при наведении курсора на кнопку к ней должны добавляться стили. box-shadow:0 3px 2px rgba(0,0,0,.4); -moz-box-shadow:0 3px 2px rgba(0,0,0,.4); -webkit-box-shadow:0 3px 2px rgba(0,0,0,.4);")); Стили должны быть в style.css |
Цитата:
input[type="submit"]:hover, input[type="reset"]:hover {
box-shadow:0 3px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 3px 2px rgba(0,0,0,.4);
-webkit-box-shadow:0 3px 2px rgba(0,0,0,.4);"));
}
|
Ну так сейчас правила добавляются вне зависимости от того, выбран чекбокс или нет.
А нужно что бы правило добавлялось только если выбран чекбокс. А если убрать css правило, и использовать jQuery скрипт со стилем hover_b, то скрипт не видит стили из stye.css |
maxg5,
удаляешь в style.css со строки 3063 эти правила
input[type="submit"]:hover, input[type="reset"]:hover {
box-shadow:0 3px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 3px 2px rgba(0,0,0,.4);
-webkit-box-shadow:0 3px 2px rgba(0,0,0,.4);"));
}
и удаляешь со строки 2601 эти правила
.button:hover,
.reply a:hover {
background: #c0c0c0;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
и будет тебе счастье... <img src='http://s019.radikal.ru/i632/1610/1b/142c8e0ea39e.gif'> |
destus,
Спасибо, все работает. |
| Часовой пояс GMT +3, время: 04:45. |