JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<div class="ms-drop bottom" style="display: block;">
    <ul>
        <li class="ms-select-all">
            <label>
                <input name="selectAllBookingManager.Selected_ProcessType" type="checkbox"> [Alle auswählen]
            </label>
       </li>
       <li class="selected">
            <label>
                <input name="selectItemBookingManager.Selected_ProcessType" type="checkbox" checked="checked" value="VM"> VM (Vormerkung)
            </label>
       </li>
       <li class="selected">
           <label>
               <input name="selectItemBookingManager.Selected_ProcessType" type="checkbox" checked="checked" value="OK"> OK (Festbuchung)
           </label>
       </li>
    </ul>
</div>

CSS

ul { list-style-type: none; }

.ms-drop ul li:hover, 
.ms-drop ul li.focus  { 
   background-color: #e2e9f4;   
 }

JavaScript

$(document).ready( function() {
    $('.ms-drop ul > li').focusin( function() {
        $(this).addClass('focus');
    });
    
    $('.ms-drop ul > li').focusout( function() {
        $(this).removeClass('focus');
    });
    
});