onmouseover -mouseout图像

Question

我怎么能有两张照片，一张是在我是onmouseover的时候展示的，另一张是我在玩的时候藏起来的？

<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是手机上的一个问题。我会使用Element.onmouseenter和Element.ontouchstart，Element.onmouseleave和Element.ontouchend代替。

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?

Answer 2

使用<img>标记而不是<td>

 <img src="ss" onmouseover="add(event)" onmouseout="remove(event)">

Java脚本

function add(e){
          e.target.setAttribute("src", "https://shiharadil.netlify.app/static/media/me.9688d9df.jpg");
}
      
      function remove(e){
          e.target.setAttribute("src", "ss");
}

Answer 3

也许你想像这样追踪原始的src。

<img id="myimg" src="https://images.freeimages.com/images/small-previews/867/volcanic-mt-ngauruhoe-1378772.jpg" onmouseover="mouseover()" onmouseout="mouseout()" />

function mouseover() {
  const elm = event.target;
  elm.setAttribute("orig_src", elm.src);
  elm.src = "https://images.freeimages.com/images/small-previews/647/snowy-mountain-1378865.jpg";
}

function mouseout() {
  const elm = event.target;
  elm.src = elm.getAttribute("orig_src");
}

https://jsfiddle.net/71zfw8s4/