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);

标签： javascripthtmlcss

Answer 1

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