javascript - 在按钮上使用 onmouseover 事件时无法使图像消失

Question

当我不在图像上而是在按钮元素上使用 onmouseover 事件时，我无法使图像消失。我需要它在 onmouseover 时出现，在没有 onmouseover 时消失。这是我的代码:

    <script>
  function sfunc1() {
    var x = document.getElementById('imgSWTCH1');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
function sfunc2() {
  var x = document.getElementById('imgSWTCH2');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc3() {
  var x = document.getElementById('imgSWTCH3');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc4() {
  var x = document.getElementById('imgSWTCH4');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc5() {
  var x = document.getElementById('imgSWTCH5');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc6() {
  var x = document.getElementById('imgSWTCH6');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
function sfunc7() {
  var x = document.getElementById('imgSWTCH7');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
</script>

这是让它在鼠标悬停时出现的 javascript，html 是

  <img id="imgSWTCH1"src="https://www.shareicon.net/data/128x128/2016/10/20/846459_blue_512x512.png" width="100" height="100"/>
        <img id="imgSWTCH2"src="https://www.writeraccess.com/wp-content/uploads/2014/08/blog-html-5.png" width="100" height="100"/>
        <img id="imgSWTCH3"src="https://www.shareicon.net/data/128x128/2016/06/25/619190_java_256x256.png" width="100" height="100"/>
        <img id="imgSWTCH4"src="https://www.shareicon.net/data/128x128/2016/05/06/760855_css_512x512.png" width="100" height="100"/>
        <img id="imgSWTCH5"src="http://poiemaweb.com/img/socketio-logo.png" width="100" height="100"/>
        <img id="imgSWTCH6"src="https://www.shareicon.net/data/128x128/2016/07/08/116973_development_512x512.png" width="100" height="100"/>
        <img id="imgSWTCH7"src="https://www.shareicon.net/data/128x128/2015/08/30/93000_javascript_512x512.png" width="100" height="100"/>
        <center>


          <br />
          <br />
          <table >
              <tb id="tab" onmouseover="sfunc1()" onmouseout="this.className='BO';">C</tb>

              <br />
                <tb id="tab" onmouseover=" sfunc3()" onmouseout="this.className='BO';">Java</tb>
                  <tb id="tab" onmouseover=" sfunc2()" onmouseout="this.className='BO';">HTML</tb>
                    <tb id="tab" onmouseover="sfunc4()" onmouseout="this.className='BO';">CSS</tb>

                      <tb id="tab" onmouseover="sfunc5()" onmouseout="this.className='BO';">Socket.io/Node</tb>
                        <tb id="tab" onmouseover="sfunc6()" onmouseout="this.className='BO';">Angular.js</tb>
                        <br />
                           <tb id="tab" onmouseover="sfunc7()" onmouseout="this.className='BO';">Javascript</tb>

                            <tb id="tab" onmouseover=" this.className='BC';" onmouseout="this.className='BO';">and much more!</tb>
          </table>
          </center>

所有这些的 onmouseout 只是使背景变为橙色，但我希望它使与其对应的图像消失，我遇到了麻烦，因为您不能为一个元素分配多个 ID。 jquery 解决方案也可以，angular 的解决方案也可以。 https://plnkr.co/edit/WwpzOkipsiCrbgbpXbd4?p=preview这是 pnlkr 链接，拉伸(stretch) html 部分以查看整个内容。

Answer 1

这是一个使用 JQuery 的简单示例:

https://jsfiddle.net/ztuf96dg/4/

$(document).ready(function() {
  $('li').hover(function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.show();
    },
    function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.hide();
    });
});