Wie kann ich nur die Maus über zwei Elemente bewegen?

Question

Wenn Sie den Mauszeiger über eine grüne Markierung bewegen, wird ein Farbdiv. Angezeigt. Dadurch können Sie die Farbe der Hervorhebung ändern. Übrigens macht der SO-Editor die Offset-Messung für die #change_color div falsch. Wie kann ich es wo machen, außer die Maus ist über .green_mark oder #change_color, #change_color hat seine Sichtbarkeit versteckt?

$(".green_mark").mouseover(function() { 
 
    var offsets = $(this).offset(); 
 
    var top = offsets.top; 
 
    var new_top = top - 10; 
 
    var left = offsets.left; 
 
    var new_left = left - 10; 
 
    $("#change_color").css("visibility","visible"); 
 
    $('#change_color').css({ 
 
     'top':new_top+'px', 
 
     'left':new_left+'px' 
 
    }); 
 
});

#change_color { 
 
    position:absolute; 
 
    border:grey solid 1px; 
 
    background: #373737; 
 
    padding: 5px; 
 
    border-radius: 3px; 
 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
    -khtml-user-select: none; /* Konqueror */ 
 
    -moz-user-select: none;  /* Firefox */ 
 
    -ms-user-select: none;  /* Internet Explorer/Edge */ 
 
    user-select: none;   /* Non-prefixed version, currently 
 
           not supported by any browser */ 
 
    visibility: hidden; 
 
} 
 

 
.blue_mark { 
 
    background: #AAF6FF; 
 
    cursor: pointer; 
 
} 
 

 
.red_mark { 
 
    background: #FF9B9F; 
 
    cursor: pointer; 
 
} 
 

 
.green_mark { 
 
    background: #D6FFAA; 
 
    cursor: pointer; 
 
} 
 

 
.yellow_mark { 
 
    background: #FFF8AA; 
 
    cursor: pointer; 
 
} 
 

 
.orange_mark { 
 
    background: #FFBF98; 
 
    cursor: pointer; 
 
} 
 

 
.purple_mark { 
 
    background: #D7D5FC; 
 
    cursor: pointer; 
 
} 
 

 
.boxes, .boxes2 { 
 
    width: 15px; 
 
    height: 15px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    position: relative; 
 
    top: 3px; 
 
} 
 

 
#blue_box2 { 
 
    background: #AAF6FF; 
 
} 
 

 
#green_box2 { 
 
    background: #D6FFAA; 
 
} 
 

 
#orange_box2 { 
 
    background: #FFBF98; 
 
} 
 

 
#purple_box2 { 
 
    background: #D7D5FC; 
 
} 
 

 
#red_box2 { 
 
    background: #FF9B9F; 
 
} 
 

 
#yellow_box2 { 
 
    background: #FFF8AA; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id='actual_verse' class='context'> 
 
    Lore 
 
<span class="orange_mark"> 
 
    m ipsum dolor sit amet, iisque scripserit nec at, an case ponderum mea, delectus volupt 
 
</span> 
 
aria in quo. Te aliquid ce 
 
<span class="red_mark"> 
 
    teros legendos has. Veritus assueverit intelleg 
 
</span> 
 
eba 
 
<span class="orange_mark"> 
 
    t id per 
 
</span> 
 
, eos cu vero pri 
 
<span class="green_mark"> 
 
    mis philo 
 
</span> 
 
sophia, no nec blandit propriae 
 
<span class="green_mark"> 
 
    . Mei stet ferri aperiri eu. Mucius deserunt sensibus eum id. 
 
    Ut cas 
 
</span> 
 
e nominavi pro, 
 
<span class="yellow_mark"> 
 
    dico reprimique suscipiantur in per. Cu vocibus ceteros sententiae mel.   Nam te diam ornatus, mei sonet volutpat facilisis ut. Minim mazim persequeri     
 
</span> 
 
s sed id, mei et animal equidem, clita atomorum at has. 
 
<span class="green_mark"> 
 
    Ut noluisse placerat suscipiantur mel 
 
</span> 
 
, cu pri mundi dicunt 
 
<span class="green_mark"> 
 
    praesent. Ignota dicunt vulputate ad vim, 
 
</span> 
 
populo option aperiri 
 
<span class="orange_mark"> 
 
    me 
 
</span> 
 
<span class="purple_mark"> 
 
    l in. Has cu essent eirmod malorum, nisl electram pri et. 
 

 
In legimus posidonium his, aeque possit platonem vel ne, nam ad meis nemore delenit. Cu discere legimus eam. Eum eius nostro ad, pro solet semper per 
 
</span> 
 
<span class="orange_mark"> 
 
    fe 
 
</span> 
 
cto ne, et eros dicam tantas pro. Ex malorum debitis cotidieque pro. Vel in legendos elaboraret conclusionemque, mutat moderatius cotidieque cu usu, mel copiosae assueverit ne. Odio imperdiet eos in, cum sint porro splendide ne, tritani aliquam eum ne. 
 

 
Mel feugiat recusabo platonem ei, sea cu numquam constituam. Ne tempor postea vim. Ad volumus accumsan apeirian has. At ius aliquid convenire, id est aliquip vivendo accusam. 
 

 
Solum scaevola ius ut, cum no mutat sadipscing. Mei te dico dolor scaevola, cu veri dictas sit, an per nullam oblique. Ex sit sale quidam reprehendunt, diam velit lucilius nam ne, mnesarchum efficiendi his ut. Nec vivendo mediocrem delicatissimi id, ad debet maiorum qui. No qui latine dolorum corpora, diam cetero insolens in cum. 
 
</span> 
 

 
<div id='change_color'> 
 
    <div id='blue_box2' class='boxes2' title='Blue'></div> 
 
    <div id='green_box2' class='boxes2' title='Green'></div> 
 
    <div id='yellow_box2' class='boxes2' title='Yellow'></div> 
 
    <div id='orange_box2' class='boxes2' title='Orange'></div> 
 
    <div id='purple_box2' class='boxes2' title='Purple'></div> 
 
    <div id='red_box2' class='boxes2' title='Red'></div> 
 
</div>

Answer 1

Sie können die Ereignisse mouseenter und mouseleave abonnieren.

var colorPickerHovered = false; 
var timer; 

$(".green_mark").mouseenter(function() { 
     if(timer){ 
     clearTimeout(timer); 
    } 
    var offsets = $(this).offset(); 
    var top = offsets.top; 
    var new_top = top - 10; 
    var left = offsets.left; 
    var new_left = left - 10; 
    $("#change_color").css("visibility","visible"); 
    $('#change_color').css({ 
    'top':new_top+'px', 
    'left':new_left+'px' 
    }); 
}); 

$(".green_mark").mouseleave(function(){ 
    timer = setTimeout(function(){ 
    if(!colorPickerHovered){ 
     $("#change_color").css("visibility","hidden"); 
    } 
    }, 250) 
}) 

$("#change_color").mouseenter(function(){ 
    colorPickerHovered = true; 
}) 

$("#change_color").mouseleave(function(){ 
    colorPickerHovered = false; 
    $(this).css("visibility","hidden"); 
}) 

jsfiddle example

Answer 2

Verwenden Sie die mouseout Veranstaltung:

$(".green_mark").mouseout(function() { 
$("#change_color").css("visibility","hidden");}); 

Wenn Sie von der grünen mouseOut auf die Farbe div zu bekommen, wird es aber schief gehen, so stellen Sie sicher, dass die Position Der Fehler ist behoben, so dass Sie niemals das Grün verlassen, um über das Farb-Div zu gehen (so dass das Farb-Div in der Nähe ist); Sie können die Farbe div an der Mausposition rendern, um auch diesen Teil zu fixieren.