[新着] Webテンプレートを仮オープンしました
#doremi a, #doremi p {
background-color: #f00;
}<div onmouseout="displayToNone (event);"> <a>森</a> <a>海</a> <p>空</p> </div>
/*document.*/addEventListener ('load', function (event)
{
document.addEventListener ('mouseover',
{
related : document.getElementById ('doremi'),
hasEntered : false,
contains : function (node) {
// node が div#doremi 内にあれば true、そうでなければ false
return node == this.related
|| 0 != (node.compareDocumentPosition (this.related) & Node.DOCUMENT_POSITION_CONTAINS);
},
show : function () {
this.related.style.display = 'block';
},
hide : function () {
this.related.style.display = 'none';
},
handleEvent : function (event) {
var t = event.target;
if (t.nodeName == 'A' && t.hasChildNodes () && t.firstChild.nodeValue == 'imoimoimo') {
// マウスが a[.="imoimoimo"] に入ったとき
this.show ();
} else if (this.contains (t)) {
// マウスが div#doremi 内にあるとき
this.hasEntered = true;
} else if (this.hasEntered) {
// マウスが div#doremi 内に入ったことがあり、外に出たとき
this.hide ();
this.hasEntered = false;
}
}
}, false);
event.target.removeEventListener ('load', arguments.callee, false);
}, false);function none(obj){//引数 1:レイヤーのID
//レイヤーの表示領域を割り出す。
pos = {x:0, x_end:0, y:0, y_end:0}
var rei = $(obj);
var rei2 = rei;
while(rei2){
pos.x += rei2.offsetLeft;
pos.y += rei2.offsetTop;
rei2 = rei2.offsetParent;
}
pos.x_end = pos.x + rei.offsetWidth;
pos.y_end = pos.y + rei.offsetHeight;
//-------------------------------------------
//レイヤーの領域外にカーソルが出たらレイヤーを非表示にする。
var cursor_x;
var cursor_y;
var browser = navigator.userAgent;
if (browser.match(/Firefox/)){
function rr(myEvent){
cursor_x =myEvent.pageX;
cursor_y =myEvent.pageY;
//rei.innerHTML = cursor_x;
if(pos.x>cursor_x || pos.y>cursor_y || pos.x_end<cursor_x+5 || pos.y_end<cursor_y+5){
//alert('!!!');
rei.style.display = "none"
}
}
rei.onmouseout = rr;
}else{
cursor_x = Event.pointerX(event);
cursor_y = Event.pointerY(event);
if(pos.x>cursor_x-5 || pos.y>cursor_y-5 || pos.x_end<cursor_x+5 || pos.y_end<cursor_y+5){
//alert('!!!');
rei.style.display = "none"
}
}
//rei.innerHTML =cursor_x;
}と、しました。function contains (node, parentNode) {
// node が parentNode の子孫かどうかを探索
while (node && node != parentNode) node = node.parentNode;
return Boolean (node);
}
function none (div, event) {
// マウスが出て行った先
var r = event.relatedTarget || event.toElement;
// マウスが出て行った先が div の外なら div を消す
if (r && ! contains (r, div)) {
div.style.display = 'none';
}
}
<div onmouseout="none (this, event);">function none(objID, event){//引数 第1：レイヤーのID, 第2：eventオブジェクト
//Firefoxは関数内からeventを参照できないので、引数でeventを入れてあげる
var rei = document.getElementById(objID);
var ele= (event.relatedTarget || window.event.toElement);
while(!(ele.parentNode.tagName=="HTML")){
if(ele.id == objID){var sin = true; }
ele = ele.parentNode;
}
if(!sin){
alert("OK");
rei.style.display="none";
}
}
と、こうなりました。