Record highlighter on mouseover

To highlight a record or a row in a list of rows, use the following simple code

<style>

    .highlight {

        background-color: rgb(202, 202, 202);

    }

</style>

<script>

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

        const theList = document.querySelector('#empList');

        theList.addEventListener('mouseover', event => {

            event.target.closest('article').classList.toggle('highlight'); //This is ven better in case the li has multiple elements

        });

        theList.addEventListener('mouseout', event => {

            event.target.closest('article').classList.toggle('highlight'); //This is ven better in case the li has multiple elements

        });

    })

</script>

Mohammed Anwar

Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .