javascript - Peristiwa klik ul's li selepas bergerak dalam konflik dengan acara pindah keluar

Question

Seperti yang ditunjukkan dalam gambar: Kesan yang saya inginkan ialah apabila li ul dipindahkan, warna berubah menjadi merah, dan apabila dipindahkan, warna berubah menjadi biru
Tetapi jika li tertentu dipilih (iaitu , diklik), saya berharap li ini akan kekal sehingga li seterusnya diklik Ia berwarna merah Walaupun tetikus melaluinya semula dan peristiwa penyingkiran dicetuskan, ia masih perlu kekal merah sehingga li lain diklik.

Berikut adalah kod saya Kesan kod ini hanya selepas klik, jika li dialih keluar, warna akan kekal biru Namun, jika li yang diklik itu dialih masuk dan keluar semula, warnanya tidak akan kekal merah dan akan menjadi biru.

Boleh sesiapa bantu saya menyelesaikannya =-= Terima kasih terlebih dahulu

<ul class="h1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $('.h1 li').mouseenter(function(){
        $(this).css({"background":"red"})
        $(this).on("click",function(){
            $('.h1 li').css({"background":"blue"})
            $(this).css({"background":"red"})
            $(this).mouseleave(function(){
                $(this).css({"background":"red"})
            })
        })
    }).mouseleave(function(){
        $(this).css({"background":"blue"})
    })
</script>

Answer 1

Menukar kedudukan css boleh mencapai kesannya. Jika anda tidak percaya saya, cubalah. DEMO Saya akan menulis satu kemudian apabila saya mempunyai masa.

js hanya membezakan yang mana satu yang anda klik

Answer 2

Anda boleh menggunakan keutamaan gaya melalui pemeriksaan visual Kelas yang ditambahkan apabila anda mengklik ditambah dengan !penting

Answer 3

css

.h1 li {
    background-color: blue;
}
.h1 li:hover{
    background-color: red;
}
.chosen {
    background-color: red!important;
}

js:

$('.h1 li').click(function() {
    $('.h1 li').removeClass('chosen');
    $(this).addClass('chosen');
})

Answer 4

Terima kasih atas jemputan.

HTML:

<ul class="h1">
    <li class="bl">1</li>
    <li class="bl">2</li>
    <li class="bl">3</li>
    <li class="bl">4</li>
    <li class="bl">5</li>
</ul>

CSS:

.bl {
    background-color: blue;
}
.bl:hover{
    background-color: red;
}
.clk {
    background-color: red;
}

JavaScript:

$('.h1>li').click(function() {
    $('.clk').removeClass('clk').addClass('bl');
    $(this).removeClass('bl').addClass('clk');
})

Adakah ini?