鼠标悬停 - 使图像出现

Question

当我将鼠标悬停在某个图像映射上并且我的其他 mouseover 和 mouseout 功能仍然正常工作时，我正在尝试使图像出现。

我正在使用：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/。