-1

このようなjQueryで選択可能な相互作用があります

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>

しかし、私はこの変更に関するイベントを定義mouseoverしました。mouseout<li>bakcground-color

backgound-color要素のプロパティ (JQuery コード)をクリックすると、 #selectable .ui-selected(CSS コード) より優先されます。

<li>タグ#selectable .ui-selectedをクリックしたときに有効にしたいです。

4

1 に答える 1

0

これを参照してください:サンプル

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

#selectable li.ui-selectee:not(.ui-selected):hover {
   background: #bef4b4;
   color: black;
}
于 2013-03-10T06:29:30.047 に答える