Trying to make this (works for first page):
$(".text").not(".active a").hover(function(){
apply to ajaxify loaded elements.
Tried:
$(document).on("hover",".text:not(.active a)",function(){
Doesn't work.
Am I missing something?
EDIT Let me add that the structure is as follows:
<ul id="static-bar" class="nav navbar-nav navbar-right">
<li class="active">
<div data-hoverLeft="home" class="active-tail-top tail-and-point"></div>
<div data-hoverLeft="home" class="active-tail-bottom tail-and-point"></div>
<a id="home" class="text" href="index.html">HOME</a>
<div data-hoverRight="home" class="active-point-top tail-and-point"></div>
<div data-hoverRight="home" class="active-point-bottom tail-and-point"></div>
</li>
<li>
<div data-hoverLeft="whatWeDo" class="tail-top-gray tail-and-point"></div>
<div data-hoverLeft="whatWeDo" class="tail-bottom-gray tail-and-point"></div>
<a id="whatWeDo" class="text" href="what-we-do.html">WHAT WE DO</a>
<div data-hoverRight="whatWeDo" class="point-top-gray tail-and-point"></div>
<div data-hoverRight="whatWeDo" class="point-bottom-gray tail-and-point"></div
</li>
</ul>
The important things to note are that I apply the active class when I'm on that particular page. Regardless, each link gets a tail and point using some CSS border trickery, and the border color of the sibling divs changes when you hover over the a tag. This hover effect doesn't work past the first page when I use the $.hover() method, and not at all when I use $.on().
Try to use:
$(document).on("hover",".text:not(.active) a",function(){
Based on your added HTML markup, you need to select any anchor with class text which is staying inside a <li> that not has class active:
$(document).on("mouseover","li:not(.active) a.text",function(){
$(this).addClass('red');
}).on('mouseout', "li:not(.active) a.text",function(){
$(this).removeClass('red');
});