2016-10-21 4 views
0

div(「B」と「C」)のdivを持つdiv両方のdiv( "B"と "C")のマージンは5pxです。 "C" divにはstyle.display = 'none'が含まれていますので、最初は表示されません。私は何をしたいのですか?div "A" onMouseOverイベントを使用しています。 "B" C」は現れ、私は外のdivに行く時に "A"、divの "C"divを2つのdivの内側に配置すると、onMouseOverを使用して1つのdivから別のdivに移動するとき

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>A.CAT</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<div id="A" onMouseOut="outA()"> 
    <div id="B" onClick="clickB()" class="buttonB">B</div> 
    <div id="C" class="buttonC">C</div> 
</div> 

<script> 
function outA() 
{ 
    document.getElementById("C").style.display="none"; 
} 

function clickB() 
{ 
    document.getElementById("C").style.display="block"; 
} 

</script> 

<style> 
.buttonB 
{ 
    border: blue 2px solid; 
    margin:5px; 
} 

.buttonC 
{ 
    border: blue 2px solid; 
    margin:5px; 
    display:none; 
} 
</style> 
</body> 

:もう一度(表示なし)ここで

は、より良い方法ですべてのこのSEにいくつかのコードです

問題は、私がdiv "B"の外に出て "C"を得ようとすると、ボーダーを渡して、プログラムがdiv "A"の外に出て、 )、divには到達できません "C"

私はポインタイベントを使用しようとしました:none、しかし私はボタンとしてCを使用することはできません。

+0

そして、あなたのコードで 'mouseover'関数はどこにありますか? – Dekel

答えて

1

利用代わりonMouseLeave:あなたは子供を残して、関数を呼び出すとき

<div id="A" onMouseLeave="outA()"> 
    <div id="B" onClick="clickB()" class="buttonB">B</div> 
    <div id="C" class="buttonC">C</div> 
</div> 

マウスうちは子供からマウスアウトイベント意志バブルアップ(B)ので、ここでは動作しません。ここで、マウスの離しは子から泡立ちません。実際には親を離れるときにだけ関数が呼び出されます。

+0

一部のブラウザ(Chrome、Mozilla)でのみ動作します。 Safari、Miscrosoft edge、Internet Explorerで動作しません –

関連する問題