I am trying to 'prependTo' "SELECT menu" to DIVs. Menu is 'prependingTo' on 'mouseover' over DIVs. In this menu is the SELECT with some options. But when I want choose some other option, options from SELECT menu is hidding. It does not work. Why ?
HTML:
<div id="add" style='width:200px; background:cyan;'> + + + + + + + + + </div>
<div id="menu">
<div style="display:inline-block;">
<button>1</button>
<button>2</button>
</div>
<div style="display:inline-block;">
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana ">Verdana </option>
<option value="Impact ">Impact </option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
</div>
</div>
<br>
<div id="cont">
<div id="container">
<div id="divA">1111<br><br> </div>
<br>
<div id="divB">2222<br><br> </div>
<br>
<div id="divC">33333<br><br> </div>
<br>
<div id="divD"><br> </div>
</div>
</div>
CSS:
#container{ padding: 100px; }
#menu{ font-size: 10px;
position: absolute;
background-color: none;
letter-spacing: 0px;
}
#divA{ background-color: yellow; }
#divB{ background-color: red; }
.divB{ background-color: red; }
#divC{ background-color: cyan; }
#divD{ background-color: brown; }
jQuery:
$("#add").live("click", function() {
var timestamp = Date.now();
$("#container").prepend('<div class="divB" id="'+timestamp+'">'+timestamp+'<br><br></div>');
});
$("#container div").live({
mouseover: function() {
if( $(this).closest("#menu").length ){ return; }
$('#menu').prependTo($(this));
}
});
Try like this
$("#container").bind({
mouseover: function() {
if( $(this).closest("#menu").length ){
return;
}
$('#menu').prependTo(this);
$("#container").unbind('mouseover');
}
});