比 CSS 类更喜欢 jQuery 上的 `ui-selected` 类答案

【问题标题】：Prefer `ui-selected` class on jQuery than CSS class比 CSS 类更喜欢 jQuery 上的 `ui-selected` 类
【发布时间】：2021-01-21 07:26:20
【问题描述】：

我在 jQuery like this 中有可选择的交互方式

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>

JQuery 代码：

<script>
$(function() {
    $( "#selectable" ).selectable();
    });

$('#selectable li').bind({
    mouseover: function(){
        if($(this).hasClass('ui-selected')){
        }else{
            $(this).css("background","#bef4b4") 
        }
    },
    mouseout: function(){
        if($(this).hasClass('ui-selected')){
        }else{
            $(this).css("background","#d4f9cd") 
        }
    }
        
    
})


</script>

HTML 代码：

<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>

但我在 <li> 上定义了 mouseover 和 mouseout 事件，这些事件改变了 bakcground-color。

现在当我点击元素时，backgound-color 属性（在 JQuery 代码上）比 #selectable .ui-selected（在 CSS 代码上）更受欢迎。

我想当我点击<li>标签时#selectable .ui-selected被启用。

【问题讨论】：

标签： jquery css jquery-ui bind jquery-events

【解决方案1】：

看到这个：Sample

#selectable li.ui-selectee:not(.ui-selected) {
   background: #d4f9cd;
   color: black;
}

#selectable li.ui-selectee:not(.ui-selected):hover {
   background: #bef4b4;
   color: black;
}

【讨论】：

如果将background-color 设置为白色并单击任何<li> 标记，则在您的鼠标悬停事件示例中，其他<li> 的background-color 也已更改。请尝试一下。