添加懸停JQuery用戶界面可選擇

-1

我使用http://jqueryui.com/selectable/#default〔實施例添加懸停JQuery用戶界面可選擇

是否可以一次我將鼠標懸停可選條目添加懸停事件？

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 

    <style> 
    #feedback { font-size: 1.4em; } 
    #selectable .ui-selecting { background: #FECA40; } 
    #selectable .ui-selected { background: #F39814; color: white; } 
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
    </style> 
    <script> 
    $(function() { 
     $("#selectable").selectable(); 
    }); 
    </script> 
</head> 
<body> 

<ol id="selectable"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
    <li class="ui-widget-content">Item 7</li> 
</ol> 


</body> 
</html>

來源

2012-10-09 user829174

因爲你的所有選擇的項目有一個類.ui-widget-content，這可以很容易地使用:hover pseudoselector實現：

.ui-widget-content:hover { 
    background-color: orange; 
}

如果你想處理JavaScript中的懸停事件，使用類似：

$(".ui-widget-content").hover(function() { 
    //what to do on hover 
}, function() { 
    //what to do when hover ends 
});

來源

2012-10-09 13:09:57 Chris

$('#selectable li').hover(function(){ 
//CODE HERE 
});

所有可選擇的李得到懸停功能。

來源

2012-10-09 13:07:01 Anton

Selectable插件會自動將類「ui-selectee」添加到所有可選對象中，因此您可以使用：

.ui-selectee:hover { 
    background-color: orange; 
}

來源

2013-05-19 08:56:10

添加懸停JQuery用戶界面可選擇

回答

相關問題