在按钮上使用onMouseover事件时，无法使图像消失

vq8itlhq 于 2022-10-24 发布在 SEO

关注(0)|答案(5)|浏览(208)

在按钮元素上而不是在图像上使用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>

这是让它出现在MouseOver上的Java脚本，而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链接，取出html部分也可以看到整个内容。

angularjs

来源：https://stackoverflow.com/questions/43700787/having-trouble-making-an-image-disappear-when-using-onmouseover-event-on-a-butto

5条答案

按热度按时间

yyhrrdl81#

下面是一个使用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();
    });
});

赞(0）回复(0）举报 2022-10-24

6tdlim6h2#

尝试使用一个用于鼠标悬停的函数和一个用于鼠标输出的函数来完成此操作。另外，使用img的可见性属性而不是Display来防止元素跳转。

See it here:
https://plnkr.co/edit/YeOgtFeEmNhRCgdQ0Mlp?p=preview

编辑

所以重点是：

function sfuncOver(imgId) {
    var x = document.getElementById(imgId);
    if (x.style.visibility === 'hidden') {
        x.style.visibility = 'visible';
    } else {
        x.style.visibility = 'hidden';
    }
  }

  function sfuncOut(imgId) {
    var x = document.getElementById(imgId);
    x.style.visibility = 'visible';
  }

...在js和html中：

<td id="tab1" onmouseover="sfuncOver('imgSWTCH1')" onmouseout="sfuncOut('imgSWTCH1')">C</td>

...以此类推但用jQuery做这件事会好一万：)这是90年代的编码风格：)

赞(0）回复(0）举报 2022-10-24

ctzwtxfj3#

你有7个函数在做同样的事情。更好的方法可能是创建一个函数，并将您想要隐藏的元素绑定到该函数。下面是一个例子：https://jsfiddle.net/83drj2rs/1/
以下是相应的Java脚本：

function toggleVisibility(element){
    if(element.style.display === "none") {
    element.style.display = "inline-block";
  } else {
    element.style.display = "none";
  }
}

Array.prototype.slice.call(document.getElementsByClassName('tab')).forEach(function(element){
    element.onmouseover = toggleVisibility.bind(this, document.getElementById(element.getAttribute('data-hide')));
});

还要注意，我删除了html元素本身的所有onmouseover属性，并将其替换为data-hide属性。这告诉函数在MouseOver事件上隐藏哪个元素。

赞(0）回复(0）举报 2022-10-24

db2dz4w84#

试着这样做：
HMTL：

<table >
              <tb id="tab1">C</tb> //make sure id is unique for each <tb>
              <br />
                (...)
          </table>

JavaScrip：
(*)确保已准备好在文档上 Package Java脚本。

$(function() {
  $('#imgSWTCH1').hide();  
  $('#tab1').mouseover(function (e) {
     //e.stopPropagation();
      $('#imgSWTCH1').show();      
  });
  $('#tab1').mouseout(function (e) {
    //e.stopPropagation();
      $('#imgSWTCH1').hide();      
});

})；

赞(0）回复(0）举报 2022-10-24

2vuwiymt5#

var change=function(){
    if(document.getElementById("image").style.visibility == "visible"){
        document.getElementById("image").style.visibility = "hidden";}else{document.getElementById("image").style.visibility="visible";}
    }
function enter(){
    document.getElementById("image").style.visibility = "hidden";
    }
function leave(){
    document.getElementById("image").style.visibility="visible";
    }

<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' href='style.css'/>
	<script src='script.js'></script>
</head>
<body>
<img onmouseover="enter();" onmouseout="leave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="change();" >ClicMe</button>
</body>
</html>

运行代码Snnipt希望它能做到…祝你好运

赞(0）回复(0）举报 2022-10-24

我来回答

在按钮上使用onMouseover事件时，无法使图像消失

5条答案

相关问题

热门标签

最新问答