If I implement your code, then I can never actually move my mouse down
into the content div. When I mouseover the tab, the div is shown, but
when I move the mouse cursor off the tab and try to move it into the
div, the div disappears because the mouseout event gets fired.
Since there are really two mouseout events fired, one when you move
the cursor from the tab down into the div and another when you move
the cursor out of the div
Now you have to remember that this only happens if you have option
collapsible: true. When I remove this from the options, then the code
that was suggested does nothing visually speaking. I suspect that the
variable holding the selection is set -1 but that doesn't hide the
currently open div.
When I use collapsible: true in conjunction with event: 'mouseover'
the div panel will disappear if I move my mouse back up on the
selected tab first otherwise it never dissapears until another tab is
selected. I suspect that some sort of mouseout event would need to be
attached to the currently showing div or all the divs. I am new to
this so any help would be appreciated.
On Mar 25, 11:13 pm, acamar <websi...@bcs.ru> wrote:
> In context of mouseout event handler the $tabs variable is not
> visible. So try
>
> $('#tabs').mouseout(function () {
> $("#tabs").tabs('option', 'selected', -1);
>
> });
>
> that should help.
>
> On 25 мар, 13:44, jq noob <sammil...@alliancecom.net> wrote:
>
>
>
> > I am currently using
>
> > $(document).ready(function()
> > {
> > var $tabs = $("#tabs").tabs({
> > selected: -1,
> > event: 'mouseover',
> > collapsible: true
>
> > });
>
> > I have tried including a .mouseout(function(){
> > //$tabs.tabs('option', 'selected', -1);
> > $tabs.tabs('select',-1);
> > }); // Used various combos of these
>
> > I can see that a mouseout event is fired, when you leave the tab and
> > move your mouse into the now showing div and another mouseout event is
> > fired when you leave that div.
>
> > What is the correct way to hide that div on mouseout and basically set
> > the tab group back to nothing selected once your focus is no longer on
> > that tab group?
>
> > I found some posts from February 08 and September 08 but none of those
> > solutions worked.
>
> > I was thinking that I could bind something to the "wrapper" but not
> > sure how or if that would even be the correct way.
>
> > <div class="wrapper">
>
> > <div id="tabs">
> > <ul>
> > <li><a href="#tabs-1">Filter 1</a></li>
> > <li><a href="#tabs-2">Filter 2</a></li>
> > <li><a href="#tabs-3">Filter 3</a></li>
> > </ul>
> > <div id="tabs-1">html</div>
> > <div id="tabs-2">html</div>
> > <div id="tabs-3">html</div>
> > </div>
> > </div>- Hide quoted text -
>
> - Show quoted text -
