I have a perfect working jquerytools accordion / tabs that change with mouse hover.
I want that when the mouse is out of the tabs container, a default tab to be activated instead the last activated tab.
My javascript is as follows:
$(function() {
$("#accordion").tabs("#accordion div", {
tabs: 'img.tab',
effect: 'fade',
event: 'mouseover'
});
});
$('#accordion').mouseout(function(){
// How should I activate a special tab?
});
EDIT
The HTML of #accordion
container:
<div id="accordion">
<!-- accordion header #1 -->
<div>
<img src="img/sample-tab-content.png" />
</div>
<img class="tab" src="./img/tab-title-activities.png" />
<div>
<h3>apprenticeship</h3>
<p>Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.</p>
</div>
<img class="tab" src="./img/tab-title-apprenticeship.png" />
<div>
<h3>association</h3>
<p>Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.</p>
</div>
<img class="tab" src="./img/tab-title-association.png" />
</div>
Images with class="tab"
are the tabs and their above HTML are tab contents.
I can now see that I have even problem with detecting the mouseout
event of #accordion
container.
Even the following code doesn't work:
$('#accordion').mouseout(function(){
alert('done');
})
The alert is given TWICE when the mouse comes IN any of the children of #container
.
EDIT 2
I had to use mouseleave
instead of mouseout
as the event and this brings us back to the main problem (selecting the default tab):
$('#accordion').mouseleave(function(){
$('#accordion').tabs('select', 1);
})
The code stops tabs from changing and completely corrupts the tab bar.
update
is what you'll need :))