Unfortunately, I am facing issues with the hover and custom attribute functionality in IE8. Even in compatibility mode, it refuses to work properly. The code snippet provided (fiddle) works perfectly fine on Mozilla, Opera, Safari, and Chrome but encounters problems in IE8.
HTML
<ul>
<li class="aniRunmated" bxTab="home_pane">Home</li>
<li class="animated" bxTab="news_pane">News</li>
<li class="animated" bxTab="project_pane">Project Outline</li>
<li class="animated" bxTab="gallery_pane">Gallery</li>
<li class="animated" bxTab="downloads_pane">Downloads</li>
<li class="animated" bxTab="links_pane">Links</li>
</ul>
<div id="home_pane" class="tabbed">Home</div>
<div id="news_pane" class="tabbed">News</div>
<div id="project_pane" class="tabbed">Project</div>
<div id="gallery_pane" class="tabbed">Gallery</div>
<div id="downloads_pane" class="tabbed">Downloads</div>
<div id="links_pane" class="tabbed">Links</div>
jQuery
$('li.animated').hover(function(){
$(this).addClass('active');
},function(){;
$(this).removeClass('active');
});
$('[bxTab]').click(function(){
$('.tabbed').css('display','none');
$('#'+$(this).attr('bxTab')).css('display','block');
});
I have experimented with different versions of jQuery including 1.3.2 and 1.4.2 but none of them seem to resolve the issue.