jQuery / CSS - Target li a instead of li?

jQuery / CSS - Target li a instead of li?

by Thulasi Ram.S

HTML

<ul class="MenuLList">
        <li><a class="Inactive" href="#">Test 1</a></li>
        <li><a class="Testing Inactive" href="#">Test 2</a> </li>
        <li><a class="Testing Inactive" href="#">Test 3</a> </li>
        <li><a class="Testing Inactive" href="#">Test 4</a> </li>
    </ul>

CSS

.MenuLList
        {
            list-style: none;
        }
        
        .MenuLList li
        {
            margin: 5px 0px;
        }
        
        .MenuLList li a
        {
            text-decoration: none;
        }
        
        .Inactive
        {
            color: Red;
            width: 100px;
            background-color: Yellow;
        }
        
        .Active
        {
            font-weight: bolder;
            color: Green;
            width: 300px;
            background-color: Lime;
            padding-left: 30px;
        }

JavaScript

$(document).ready(function () {
            $('.MenuLList').find('a.Testing').hover(function () { $(this).addClass('Active'); }, function () { $(this).removeClass('Active'); });
        });