Mouseout from div to neighboring div, keep main div open, mousout outside those divs, main div closes [duplicate]
Possible Duplicate:
Mouseout on specified divs and keep original div open
I asked a similar question and it got buried without any answer that solves this, so please don't flame me as I've waited and no answer works.
Here is the fiddle all set up: http://jsfiddle.net/bUzPG/10/
It seems like everything should work with the fiddle, but the code doesn't do what it should. Any 开发者_Go百科working answer will be marked as solved, this is driving me crazy!
If I understand you correctly:
$("#openDiv").mouseout(function (e) {
var used_classes = ['x', 'z'];
var $c = $(e.relatedTarget).attr('class');
if ($c=='x' || $c=='z')
{
$("#openDiv").show().css('background-color', 'pink');
}else{
$("#openDiv").hide();
}
});
Hope this is what you wanted
http://jsfiddle.net/bUzPG/16/
Would it work if you did it this way, by surrounding your 3 divs in a parent div? http://jsfiddle.net/bUzPG/17/
The easiest way is to wrap the div
elements in a parent div
and assign the hover()
events to that container:
html:
<div>
<div class="x">x</div>
<div id="openDiv" class="y">me</div>
<div class="z">z</div>
</div>
jQuery:
$('.container').hover(
function(){
$('#openDiv').addClass('highlight');
},
function(){
$('#openDiv').removeClass('highlight');
});
JS Fiddle demo.
Bearing in mind that the parent div
(or other containing element) needs to fit tightly to the bounds of the div
elements, otherwise the mouseleave
event won't trigger as you'd expect), which is why the div
(but not the div > div
s) is floated. Other options include display: inline;
or display: inline-block;
.
精彩评论