Question

问题已解决，无需任何信息。

Answer 1

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

$(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();
    });
});

Answer 2

尝试使用一个用于鼠标悬停的功能和一个用于鼠标悬停的功能。还可以使用img的visibility属性而不是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年代的编码风格：）

Answer 3

你有7个功能做同样的事情。更好的方法可能是创建一个函数并将要隐藏的元素绑定到它。这是一个例子的小提琴：https://jsfiddle.net/83drj2rs/1/

以下是相应的JavaScript：

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属性。这告诉函数在鼠标悬停事件中隐藏哪个元素。

Answer 4

尝试这样的事情：

HMTL：

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

使用Javascript：
（*）确保将javascript包装在文档上。

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

}）;

Answer 5

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>

运行代码snnipet 希望它能做到......祝你好运

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

5 个答案: