javascript - onmouseover -mouseout 图像

Question

我怎么能有两张图片，一张在鼠标悬停时显示，一张在鼠标移出时隐藏？

<td id="img" onmouseover="showIt(this.src)" onmouseout="hideIt()" src="image1.jpg " src="default.jpg">my box" </td>
    
    
    function showIt(imgsrc)
    {
    document.getElementById('img').src=imgsrc;
    }
    
    function hideIt()
    {
    document.getElementById('img').src="default.png";
    }

Answer 1

您也可以仅使用 CSS 来实现此目的。请注意，在 DOM 操作方面，CSS 总是比 JS 快。

另外如评论所述，您必须改用 img 标签

CSS 方法

.hover-toggle {
  content: url('https://reputationtoday.in/wp-content/uploads/2019/11/110-1102775_download-empty-profile-hd-png-download.jpg');
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}

.hover-toggle:hover {
  content: url('https://img.favpng.com/0/8/3/user-profile-computer-icons-internet-bot-png-favpng-92SBLLR7CwZpN8Vm6MUsuU4Sd.jpg')
}

<img class='hover-toggle'>

---

正如 @StackSlave 正确评论的那样, hover 在移动设备上会有问题。

:hover is a problem on mobile. I would use Element.onmouseenter and Element.ontouchstart and Element.onmouseleave and Element.ontouchend instead.

JS 方法

function registerEvents() {
  const img = document.getElementById('img');
  img.addEventListener('mouseenter', showIt)
  img.addEventListener('mouseleave', hideIt)
}

function showIt() {
  this.src = 'https://img.favpng.com/0/8/3/user-profile-computer-icons-internet-bot-png-favpng-92SBLLR7CwZpN8Vm6MUsuU4Sd.jpg';
}

function hideIt() {
  this.src = 'https://reputationtoday.in/wp-content/uploads/2019/11/110-1102775_download-empty-profile-hd-png-download.jpg';
}

function initialize() {
  const img = document.getElementById('img');
  // set default state
  hideIt.call(img)
  
  // Register events
  registerEvents()
}

initialize()

#img {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}

<img id='img'>

引用:

• Detecting hover or mouseover on smartphone browser
• Why are inline event handler attributes a bad idea in modern semantic HTML?