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

你最好使用CSS：hover伪类来显示img2。

摆脱img1.onmouseover和img1.onmouseout，并在你的样式块中添加以下css：

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

我在这里创造了一个示例小提琴...... https://jsfiddle.net/clayRav/6kvw3ujk/。

鼠标悬停 - 显示图像

1 个答案: