JQuery изменить класс на кнопку наведения ASP.net - PullRequest
3 голосов
/ 10 августа 2011

Я новичок в JQuery.У меня есть кнопка с классом css, который работает нормально, но я хочу изменить класс css при наведении курсора на кнопку.

Как мне это кодировать?

Вот чтоЯ так далеко:

//on top in my heading:

<script type="text/javascript">
    $('btn').hover(function () {
        alert("Test"); //just for testing
    });
</script>

//my button:

<button id="btn" class="default_btn">ButtonText</button> 

Ответы [ 4 ]

1 голос
/ 10 августа 2011

Изменить ссылку на #btn.

$(document).ready(function(){

    $('#btn').hover(function () {
            alert("Test"); //just for testing
        });

});

См. JSfiddle:

http://jsfiddle.net/Curt/CKXw3/1/

1 голос
/ 10 августа 2011

Почему бы вам не попробовать CSS?

.default_btn:hover{
    background-color: #f00;
}

Демо здесь: http://jsfiddle.net/naveen/Ytkma/

Если вы хотите jQuery Solution, попробуйте это.

$("#btn").hover(function() {
        $(this)
            .removeClass("default_btn")
            .addClass("default_hover_btn");
    }, function() {
        $(this)
            .removeClass("default_hover_btn")
            .addClass("default_btn");
});

Демо: http://jsfiddle.net/naveen/SfGVD/

0 голосов
/ 10 августа 2011

Если вы хотите выбрать идентификаторы в jQuery, вы просто делаете это, как в css: #id, в вашем случае # btn

Вспомогательная функция jQuery hover обычно нуждается в обратных вызовах. один при наведении мыши и один при отсутствии мыши.

$(document).ready(function(){
    $('#btn').hover(function(){
        alert("over");
    },function(){
        alert("out");
    });
});

Другой способ - определить тип события:

$(document).ready(function(){
    $('#btn').hover(function(event){
        if (event.type == "mouseenter") {
            console.log("over");
        } else {
            console.log("out");
        }
    });
});

Функция наведения привязывает функции к объекту jQuery. mouseenter и mouseleave. Поэтому мы можем предположить, что это не mouseenter, это mouseleave.

0 голосов
/ 10 августа 2011

В любом случае, чтобы ваш код работал, измените ваш селектор на

$('#btn')
...