JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div class="rel">
    <div class="trigger">Hover me</div>
    <div class="flyout">
        <h3>What is a waffle?</h3>
        <select name="answer">
            <option value="car">A car</option>
            <option value="nationality">A nationality</option>
            <option value="food">A food</option>
        </select>
    </div>
</div>

CSS

.rel { position: relative; }
.trigger {
    padding: 5px;
    border: 1px solid black;
    cursor: pointer;
    width: 100px;
}

.flyout {
    padding: 20px;
    border: 1px solid black;
    width: 200px;
    position: absolute;
    top: 0;
    left: 111px;
    display:none;
}

.block { display:block !important; }

JavaScript

$(document).ready(function(){
    var $trigger = $('.trigger'),
        $flyout = $('.flyout'),
        $select = $flyout.find('select');
    
    $trigger.on('mouseenter', function(){
        $flyout.show();
    });
    
    $trigger.on('mouseleave', function(){
        $flyout.hide();
    });
    
    $flyout.on('mouseenter', function(){
        $(this).addClass('block');
    });
    
    $flyout.on('mouseleave', function(){
        $(this).removeClass('block');
    });
});