1 
<div style='position:relative'>
<div id ='tag' style=' border: 1px solid red; position : absolute; top: 20px; left: 20px; width: 50px; height: 50px;'></div>
<img src='http://localhost/jlin.jpg' id='wow'>
</div>

これは私のhtmlコードです

window.onload = function(){
    var tag = document.getElementById('tag');

    tag.onmouseover = function(){
      tag.style.visibility = "hidden";
    }
    tag.onmouseout = function(){
    tag.style.visibility = "visible";
    }
}

これは私のjavascriptコードです。マウス カーソルを合わせると内側の div が非表示になり、マウス カーソルをそこから離すと再び表示されるようにしたいのですが、マウスを内側の div に置くと、内側の div が点滅し続けるのはなぜですか?

2 番目の質問: 実際にはタグ付け効果を作成したいので、div にマウスを合わせると表示されます。そこで、JavaScript コードを次のように変更します。

window.onload = function(){
    var tag = document.getElementById('tag');
    tag.style.visibility = "hidden";
    tag.onmouseover = function(){
      tag.style.visibility = "visible";
    }
    tag.onmouseout = function(){
    tag.style.visibility = "hidden";
    }
}

うまくいきません。innerDiv 内にインラインを追加しvisibility: hidden;、javascript を次のように設定する別の方法を試しました。

window.onload = function(){
    var tag = document.getElementById('tag');
    tag.onmouseover = function(){
      tag.style.visibility = "visible";
    }
}

それもうまくいかないようですが、なぜですか？これは最初の質問のフィドルです: http://jsfiddle.net/uFLPg/

4

3 に答える 3

5

が設定されている場合visibility: hidden、マウス イベントは要素に送信されません。

表示されていたのは、要素が非表示になったときにイベントmouseoutが発生し、コードが再び表示されるようになりmouseover、マウスが移動するとすぐにイベントがトリガーされたということです。

ここにいくつかの追加情報があります:不透明度:0 は可視性:非表示とまったく同じ効果がありますか?

opacity: 0代わりに使用してください。

フィドル

window.onload = function(){
    var tag = document.getElementById('tag');

    tag.style.opacity = 0;
    tag.onmouseover = function () {
        tag.style.opacity = 1;
    }
    tag.onmouseout = function () {
        tag.style.opacity = 0;
    }
}

古いブラウザの不透明度のサポートが心配な場合は、背景を に設定して でdiv をvisibility: hidden;ラップすることで引き続き使用できます。 tagdivtransparent

mouseover/mouseout ハンドラーをラッピング div にアタッチし、子の可視性を変更します。これにより、ラッパーは常にマウス イベントを受け取るため、mouseover/mouseout イベントの繰り返しが回避されます。

デモ 2:

HTML:

<div style='position:relative'>
    <div id='tag' style='position : absolute; top: 20px; left: 20px; width: 50px; height: 50px; z-index: 10; background: transparent;'>
        <div id='tagInner' style=' border: 1px solid red; position : absolute; top: 0; left: 0; right: 0; bottom: 0;'>     
    </div>
    </div>
    <img src='http://www.hihowareyou.com/store/images/products/tn_HiVinylFrontmed.jpg' id='wow'>
</div>

コード：

var tag      = document.getElementById('tag');
var tagInner = document.getElementById('tagInner');

tagInner.style.visibility = 'hidden';
tag.onmouseover = function () {
    tagInner.style.visibility = 'visible';
}
tag.onmouseout = function () {
    tagInner.style.visibility = 'hidden';
}

CSSTransparency Settings for All Browsersに関する CSSTricks に関する興味深い記事もあります。私は古いブラウザでそのアプローチを試したことはありませんが、うまくいくかもしれません。

于 2013-09-06T04:58:23.750 に答える
2

達成しようとしていることは、CSS で実行できます。

#tag:hover { opacity: 0; }

http://jsfiddle.net/Rh5wb/

于 2013-09-06T04:55:21.753 に答える
1

opacity と js の使用

var tag = document.getElementById('tag');

tag.onmouseover = function () {
    tag.style.opacity = 0;
}
tag.onmouseout = function () {
    tag.style.opacity = 1;
}

http://jsfiddle.net/uFLPg/1/ 1

于 2013-09-06T05:11:46.997 に答える