如何为jQuery对话框按钮设置不同的悬停颜色

Question

我不会给我的jquery对话框按钮提供不同的悬停颜色。例如，当用户将鼠标悬停在“确定”按钮上时，悬停颜色将变为蓝色，并且当他悬停在取消按钮上时，悬停颜色将变为灰色。 有谁能告诉我我该怎么做？

Answer 1

基本理论：使用一个或多个css类，您可以在鼠标输入时动态添加到您的html对象，并在鼠标移出时将其删除。您可以查看jQuery hover event以及如何通过work with attributes in jQuery了解如何操作的一些示例。

详细说明：有两种不同的方法可以立即想到，具体取决于您想要确定/取消按钮“决定”的位置。

1. 向不同背景颜色的样式表中添加两个不同的类，并为每个元素添加一个类。这意味着你需要两个非常相似的jQuery方法，但大多数方法可以被分解出来以避免重复。

2. 在您的按钮上使用不同的类名（或使用按钮ID或someting）并创建两个不同的CSS选择器，例如.ok .hover { your style here }和.cancel .hover { your style here }。然后，您只需要一个 jQuery调用，它使用jQuery选择器命中两个按钮，并添加/删除hover类。

Answer 2

您可以使用此功能：

function changeButtonClass(buttonIndex, classes) { 
var selector = 'div[class^=ui-dialog-buttonpane] > button'; 
var buttonConcerned; 
if (buttonIndex >= 0) { 
    buttonIndex++; 
    buttonConcerned = $(selector + ':nth-child(' + buttonIndex + ')'); 
} else { 
    return; 
} 
buttonConcerned.removeClass(); 
buttonConcerned.addClass(classes[0]); 
buttonConcerned. 
    hover(
    function() { 
    $(this) 
    .removeClass() 
    .addClass(
    classes[1]) 
    }, 
    function() { 
    $(this) 
    .removeClass() 
    .addClass(
    classes[0]) 
    }) 
    .focus(
    function() { 
    $(this) 
    .removeClass() 
    .addClass(
    classes[2]) 
    }) 
    .blur(
    function() { 
    $(this) 
    .removeClass() 
    .addClass(
    classes[0]) 
    }); 
} 

然后调用函数与此（对于3个按钮对话框）：

var classes = new Array('myClass', 'myClass2', 'myClass2'); 
changeButtonClass(0, classes); 
var classes = new Array('myClass3', 'myClass4', 'myClass4'); 
changeButtonClass(1, classes); 
changeButtonClass(2, classes); 

所以它的工作原理;）

Answer 3

$(document).ready(function() { 
    $(":button").hover(function() { 
     $(this).css('background', 'url('/images/buttons/green_26.png ')'); 
    }); 
    $(":button").mouseout(function() { 
     $(this).css('background', 'url('/images/buttons/grey_26.png ')'); 
    }); 
});