Trying to mix a variable with :not then use that variable with addClass. but no luck yet.

HTML

<ul>

  <li><a href=#>Nav One</a></li>

  <li><a href=#>Nav Two</a></li>

  <li><a href=#>Nav Three</a></li>

  <li><a href=#>Nav Four</a></li>

</ul>

LESS

ul{

    li{

        a{

            color: black;

            transition: all 0.5s ease;

            font-size: 3rem;

            text-decoration: none;

        }

    }

}

.enc-non-active{

    color: gray;

}

JAVASCRIPT

myFunction('ul li a', 'enc-active', 'enc-non-active');



function myFunction($menu, $activeClass, $nonActiveClass) {

   $(function(){

        $($menu).hover(function(){

            $(this).addClass($activeClass);

        },

        function(){

            $(this).removeClass($activeClass);

        });

        $($menu).hover(function(){

            var fullPath = $menu + ':not(' + $activeClass + ')';

            $(fullPath).addClass($nonActiveClass);

        },

        function(){

            var fullPath = $menu + ':not(' + $activeClass + ')';

            $(fullPath).removeClass($nonActiveClass);

        });

    });

}

Here is the CodePen http://codepen.io/antfuentes87/pen/pJEaeb if anyone can let me know what I am doing wrong, that would be great. Thanks for your time.