JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="detaildetail">
    
    <ol class="jobdetail">
        <li>
            <div id="lihouse">
                <div class="listing_title"> <a href="#">I am li number 1!</a></div>
                <div class="listing_info_small">fun stuff goes right here. maybe a pretty little heart too</div>
                    <div id="buttonSm_container"> <!--Button Container Start -->
                            <div class="buttonSm1"><div class="buttonSm_arrow"></div></div>
                    </div> <!--Button Container End -->
            </div>
        </li>
        
        <li>
            <div id="lihouse">
                <div class="listing_title"> <a href="#">I am li number 2!</a></div>
                <div class="listing_info_small">fun stuff goes right here. maybe a pretty little heart too</div>
                    <div id="buttonSm_container"> <!--Button Container Start -->
                            <div class="buttonSm1"><div class="buttonSm_arrow"></div></div>
                    </div> <!--Button Container End -->
            </div>
        </li>
        
        <li>
            <div id="lihouse">
                <div class="listing_title"> <a href="#">I am li number 3!</a></div>
                <div class="listing_info_small">fun stuff goes right here. maybe a pretty little heart too</div>
                    <div id="buttonSm_container"> <!--Button Container Start -->
                            <div class="buttonSm1"><div class="buttonSm_arrow"></div></div>
                    </div> <!--Button Container End -->
            </div>
        </li>
        
        <li>
            <div id="lihouse">
                <div class="listing_title"> <a href="#">I am li number 4!</a></div>
                <div class="listing_info_small">fun stuff goes right here. maybe a pretty little heart too</div>
                    <div id="buttonSm_container"> <!--Button Container Start -->
                            <div class="buttonSm1"><div...

CSS

#detaildetail {
    width: 600px;
}


#buttonSm_container {
    z-index: 20;
    float: right;
    margin-right: -1px;
    z-index: 99;
    width: 28px;
    height: 100%;
}

.buttonSm1 {
    text-align: center;
    text-decoration: none;
    background-color: #e6e6e6; 
    background-image: -moz-linear-gradient( #F5F5F5, #F1F1F1);
    background-image: -webkit-linear-gradient(#F5F5F5, #F1F1F1);   
    position: absolute;
    margin-top: -1px;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 28px;
    border: 1px solid #ebebeb;
        -webkit-border-radius: 3px;
        float: right;
        z-index: 99;
}    
    
.buttonSm1:hover {
    background-image: -webkit-linear-gradient(#fafafa, #fafafa);
    background-color: #fafafa!important;
    border-top-left-radius: 3px 3px;
    border-top-right-radius: 0px 0px;
    border-bottom-right-radius: 0px 0px;
    border-bottom-left-radius: 3px 3px;
    display: block;
    z-index: 99;

}
    
.buttonSm_arrow {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("nav_logo95.png");
    background-origin: padding-box;
    background-position: -23px -260px;
    background-repeat: repeat;
    background-size: auto auto;
    height: 13px;
    top: 50%;
    width: 15px;
    top: 36%;
    margin-left: 7px;
    position: absolute;
}    


.jobdetail{
    list-style: none;
    float: left;    
    height: 100%;
}

.jobdetail ol {
    list-style: none;
}

.jobdetail li {
    float:left;
    display:block;
    margin-top: 10px;
    margin-left: 10px;
    width:230px;
    height: 45px;
    position: relative;                    
    padding: 5px 0px 11px 5px;
    font-family: Arial,sans-serif;
    font-size: 13px;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    border: 1px solid #FFF;        
}


.jobdetail li.focused {
    border: 1px solid #ebebeb;
    -webkit-box-shadow: 2px 1px 1px...

JavaScript

(function( $ ) {
        
    $( document ).ready(function() {    

        // As always, cache a reference to any jQuery selected objects for optimization
        var $jobDetails = $( 'ol.jobdetail' );
        
        // Hide the buttons initially
        $jobDetails.find( '.buttonSm1' ).hide();
        
        /*
        We'll use $.delegate rather than $.bind - delegate is a great way to set a single event listener on a parent and listen for events on any of its children. This is a big advantage in terms of optimization and speed.
        */
        
        $jobDetails.delegate( 'li', 'mouseenter', function( event ) {
            var $li = $( event.currentTarget );
            
            // console.log( 'mouse entering', $li.find( '.buttonSm1' ) );
            console.log( 'mouse entering', $li );
            
            // Show the button in this list item
            $li.find( '.buttonSm1' ).show();
        });
        
        $jobDetails.delegate( 'li', 'mouseleave', function( event ) {
            var $li = $( event.currentTarget );
                            
            // console.log( 'mouse leaving', $li.find( '.buttonSm1' ) );
            console.log( 'mouse leaving', $li );
            
            // Hide the button in this list item
            $li.find( '.buttonSm1' ).hide();
            
        });
        
        $jobDetails.delegate( '.buttonSm1', 'mouseenter', function( event ) {
            var $button = $( event.target );
            
            // The secret to hover intent is storing a reference to a timeOut (something that will be fired
            // after a certain number of milliseconds) where it can be cleared.
            
            // Why? The essence of hover intention is that the user should cancel their intent to do
            // something if they move the mouse off of something BEFORE the timeout has fired
            
            // So we fire the clearTimeout in two places:
            //
            // * first...