javascript - 悬停后永久显示图像的颜色

Question

如果可能的话，我需要你的专业知识，我想做的是给图像上色，或者当笔或鼠标悬停在图像上时，逐部分显示图像颜色，你可以查看下面的照片

我当前的代码只是在你点击它的一部分后显示一个 gif，我想做的是我想在它悬停后永久显示图像的颜色

<div class="intro-texts">
                <div id="div1">
                    <div class="auto-home-logo"><img src="<?php echo get_template_directory_uri(); ?>/img/logo-normal.jpg" class="img-responsive center-block"></div>
                    <div class="blinking-home-text">    <span class="blink_text">Click to the cloud to enter</span> </div>
                </div>
                <div id="div2" class="fade-in">
                    <div class="auto-home-logo"><img src="<?php echo get_template_directory_uri(); ?>/img/hey2.gif" class="img-responsive center-block"></div>
                </div>
            </div>

JS

var div1 = document.getElementById('div1'),
    div2 = document.getElementById('div2');
function switchVisible() {
  if(!div1) return;
  if (getComputedStyle(div1).display == 'block') {
    div1.style.display = 'none';
    div2.style.display = 'block';
  } else {
    div1.style.display = 'block';
    div2.style.display = 'none';
  }
}
document.getElementById('div1').addEventListener('click', switchVisible);

Answer 1

您可以尝试使用“鼠标悬停”事件而不是“点击”。