Javascript 鼠标悬停-使图像显示

当我将鼠标移到某个图像贴图上时，我试图使图像出现，但我的其他mouseover和mouseout功能仍在工作

<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>

我正在使用：

<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>

基本上是这样

<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>

#img2{
位置：固定；
右：0；
底部：0；
}

<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>

var img1=document.getElementById（“img1”），
img2=document.getElementById（“img2”）；
img2.style.display=“无”//加载页面时隐藏
img1.onmouseover=函数（）{
img2.style.display=“块”；
}
img1.onmouseout=函数（）{
img2.style.display=“无”；
}

我现在在一个网站上使用这种方法。但是我在地图区域内使用的不是

，而是一个ID。像这样

<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>

<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>

---

这个结果是当我将鼠标悬停在图像地图上时显示的图像。但是，它取消了我的其他功能。如何让所有东西协同工作？最好使用CSS:hover伪类来显示img2

<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>

去掉img1.onmouseover和img1.onmouseout，并在样式块中添加以下css：

<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>

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

---

我在这里创建了一个小提琴示例

除了onmouseover和onmouseout之外，我没有看到任何其他函数。还取消了什么？请提供完整代码，然后我会检查它发生了什么@StephanieHallberg？图像是以编程方式生成的，这就是样式表方法无法工作的原因吗？你能用你的代码创建一个JSFIDLE吗？你看过我的小提琴了吗？

<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>