Mouseover - 画像を表示する

Question

特定の画像マップ上にマウスを置いたときに画像を表示しようとしていますが、他のマウスオーバーやマウスアウト機能がまだ働いています。

私が使用しています：基本的にはhttp://clba.nl/sitepoint/img-hover-demo-js2.htm

を。

<style> 
    #img2{ 
    position: fixed; 
    right:0; 
    bottom:0; 
    } 
</style> 

<script> 
    var img1 = document.getElementById("img1"), 
     img2 = document.getElementById("img2"); 

    img2.style.display = "none"; // hide when page is loaded 

    img1.onmouseover = function(){ 
    img2.style.display = "block"; 
    } 

    img1.onmouseout = function(){ 
    img2.style.display = "none"; 
    } 
</script> 

私は、このメソッドを使用して、ウェブサイト上で、今それを使用しています。しかし<img id="img1" src="images/van4.jpg" alt="" />の代わりに私はマップエリア内でIDを使用しています。このように

<map name="map12" id="img_id12"> 
    <area id="img2" class="youtube" coords="3878,24,3957,96" shape="rect" href="https://www.youtube.com/embed/skV-q5KjrUA" style="outline:none;"  
     onmouseover="if(document.images) document.getElementById('img_id12').src= 'assets/images/text/day/12solaire-ani.gif'; PlaySound('solaire'); " 
     onmouseout="if(document.images) document.getElementById('img_id12').src= 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');" /> 
</map> 

この結果は、イメージマップにマウスを重ねると表示されます。しかし、それは私の他の機能をキャンセルします。どのようにすべてのことを一緒に働かせるためのヒント？

Answer 1

img2を表示するには、CSS：hover擬似クラスを使用するのが最良です。

はimg1.onmouseoverとimg1.onmouseoutを取り除くと、あなたのスタイルブロックに次のCSSを追加しなさい：

#img1:hover + #img2 {display:block} 

私はフィドルここに例を作成しました... https://jsfiddle.net/clayRav/6kvw3ujk/。