javascriptのホバーを他のすべてのホバーをアクティブにするのを止めるには？

Question

私はあなたがマウスを操作したときにマウスを動かすが、ある画像にマウスを合わせると、他のすべての画像もマウスのように変わります。どうやって他の人に影響を与えずに一度に1つホバーすることができますか？

<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f505b8a79bc462950c46/1469117701248/k_1.png/" ID="img1" onMouseEnter="doMouseenter()" onMouseLeave = "doMouseleave()"/></P> 

<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f584be65943e371ac3c8/1469117828984/k_2.png/" align="right" ID="img2" onMouseEnter="doMouseenter()" onMouseLeave = "doMouseleave()"/></P> 

<script language="Javascript"> 
function doMouseenter() { 
document.getElementById("img3").src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f6efd482e96f971b2dae/1469118191453/k_3_hover.png"; 
document.getElementById("img4").src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f7cc8419c25e40f16e6b/1469118412438/k_4_hover.png"; 
} 

function doMouseleave() { 
document.getElementById('img3').src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f603d482e96f971b24b2/1469117955279/k_3.png/"; 
document.getElementById('img4').src = "http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f759b8a79bc462952502/1469118297585/k_4.png/"; 

} 

Answer 1

あなたがしたい場合は、次のように行うことができます。

<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f505b8a79bc462950c46/1469117701248/k_1.png/" ID="img1" onMouseEnter="this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f6efd482e96f971b2dae/1469118191453/k_3_hover.png'" onMouseLeave = "this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f603d482e96f971b24b2/1469117955279/k_3.png/'"/></p> 
 

 

 

 
<p><IMG SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f584be65943e371ac3c8/1469117828984/k_2.png/" align="right" ID="img2" onMouseEnter="this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f7cc8419c25e40f16e6b/1469118412438/k_4_hover.png'" onMouseLeave = "this.src='http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f759b8a79bc462952502/1469118297585/k_4.png/'"/></p>

Answer 2

あなたは今までにdoMouseenter（）が呼び出されたときにIMG3とIMG4の両方を開くためにJavaScriptを言っています。

これにより、個々の要素が変更されます。

HTML

<p><img SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f505b8a79bc462950c46/1469117701248/k_1.png/" ID="img1" onmouseover="doMouseenter(this)" onmouseout="doMouseleave(this)"></P> 

<p><img SRC="http://static1.squarespace.com/static/5736026127d4bd28d97e2b7a/t/5790f584be65943e371ac3c8/1469117828984/k_2.png/" align="right" ID="img2" onmouseover="doMouseenter(this)" onmouseout="doMouseleave(this)"></P> 

はJavaScript

function doMouseenter(obj) { 
    obj.style.opacity = 1; 
} 
function doMouseleave(obj) { 
    obj.style.opacity = 0; 
}