JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<ul class="job-details">
    <li>
        <button>Button</button>
        <h3>Item #1</h3>
    </li>
    
    <li>
        <button>Button</button>
        <h3>Item #2</h3>
    </li>
    
    <li>
        <button>Button</button>
        <h3>Item #3</h3>
    </li>
</ul>

CSS

.job-details li {
    border: 5px solid red;
    display: block;
    margin: 1em;
    padding: 0.5em;
}

.job-details li.focused {
    border: 5px solid orange;
}

.job-details button {
    float: right;
}

JavaScript

// As always, cache a reference to any jQuery selected objects for optimization
var $jobDetails = $( 'ul.job-details' );

// Hide the buttons initially
$jobDetails.find( 'button' ).hide();

$jobDetails.delegate( 'li', 'mouseenter', function( event ) {
    var $li = $( event.currentTarget );
    
    // Show the button in this list item
    $li.find( 'button' ).fadeIn( 'fast' );
});

$jobDetails.delegate( 'li', 'mouseleave', function( event ) {
    var $li = $( event.currentTarget );
    
    // Hide the button in this list item
    $li.find( 'button' ).fadeOut( 'fast' );
});

$jobDetails.delegate( 'button', 'mouseenter', function( event ) {
    var $button = $( event.currentTarget );
    
    // Add a class to the parent (the list item) to give it styles
    // Use a setTimeout to make it take place in 1 second
    setTimeout( function() {
        $button.closest( 'li' ).addClass( 'focused' )
    }, 1000 );
});

$jobDetails.delegate( 'button', 'mouseleave', function( event ) {
    var $button = $( event.currentTarget );
    
    // Remove the class from the parent to revert to normal styles
    $button.closest( 'li' ).removeClass( 'focused' );
});