鼠标移动时如何改变图像颜色？ [英] How to make image change color while mouse is moving over?

问题描述

首先，对于奇怪的标题感到抱歉，我不知道描述它的更好方式。

基本上我希望图像改变颜色，而鼠标正在移动（悬停）在它上面，但是当鼠标静止时它会停止，

鼠标静止时，颜色不会改变，
$ b

当鼠标移动时，颜色会发生变化。我知道CSS中有悬浮属性，但它只有2个状态，当鼠标悬停在它上面时，当它不在时，我要找的东西有点棘手。

希望这可以解释它：/ b>您可以通过CSS动画实现这一点，使用Javascript来实现当鼠标移动到图像上时切换一个类，或者停止这样做。

如果图像尚未包含，则图像需要包装在另一个标签中，并且那么需要将伪元素添加到该标签pos它直接坐在图片的顶部，初始不透明 0 。我们通过设置 混合混合模式 后者的属性。当鼠标首先移动到图像上时，可选择将其转换为灰度，并且伪元素的背景色开始动画。当鼠标停止移动时，JavaScript中的超时会向父元素添加一个类，该元素设置 animation-play-state 伪元素的属性为 paused 和，当鼠标再次移动时，该类将被删除。

您可以精炼&调整一切（例如，删除图像的过滤器，添加/删除关键帧，为 > mix-blend-mode ，只需编辑CSS即可调整 animation-duration ），无需触摸JavaScript。

var figure = document.querySelector（figure），img = figure.querySelector（ img），timer; img.addEventListener（mousemove，function（）{clearTimeout（timer）; figure.classList.remove（paused）; setTimeout（function（）{figure.classList.add（paused）） ;}，300）;}，0）;

* {box-sizing：border-box; margin：0; padding：0;} figure {display：inline-block; position：relative;} img {vertical-align：middle; transition：-webkit-filter .25s linear 99999s，filter .25s linear 99999s;} img：hover {-webkit-filter：grayscale（1）;滤波器：灰度（1）; transition-delay：0s;} figure :: after {animation：colors 5s linear infinite;底部：0;内容：;左：0; MIX-混合模式：叠加;不透明度：0;指针事件：无;位置：绝对的;右：0;顶部：0;过渡：不透明.25s线性99999s;}图：悬停::之后{不透明度：.75;转换延迟：0s;} figure.paused ::在{animation-play-state：paused;}之后{} {@ backgroundframe：＃f00;} 16.667％{background：＃ff0;} 33.333％{background： ＃0f0;} 50％{background：＃0ff;} 66.667％{background：＃00f;} 83.333％{background：＃f0f;} 100％{background：＃f00;}} pre>

< figure> < img src =https://unsplash.it/500/500/?random>< / figure>

First off, sorry for the weird title, I don't really know a better way of describing it.

Basically I want the image to change color while the mouse is moving (hovering) over it, but for it to stop when the mouse is still,

While the mouse is stationary, color doesn't change,

While the mouse is moving, color changes.

I know there is the hover attribute in CSS, but it only has 2 states, when the mouse is hovering over it, and when it is not, what i'm looking for is something a bit trickier.

Hopefully that explains it :/

解决方案

You can achieve this with CSS animations, using Javascript to toggle a class when the mouse moves over the image, or stops doing so.

The image will need to be wrapped within another tag, if it isn't already, and then a pseudo-element will need to be added to that tag, positioned to sit directly on top of the image, with an initial opacity of 0. We ensure the image is visible behind the pseudo-element by setting the mix-blend-mode property of the latter. When the mouse first moves over the image it is, optionally, converted to grayscale and the background-color of the pseudo-element begins animating. When the mouse stops moving, the timeout in the JavaScript adds a class to the parent element which sets the animation-play-state property of the pseudo-element to paused and, when the mouse is moved again, this class is removed.

You can refine & tweak everything in this (e.g., removing the image's filter, adding/removing keyframes, chaning the mix-blend-mode, adjusting the animation-duration) just by editing the CSS, no need to touch the JavaScript.

var figure=document.querySelector("figure"),
    img=figure.querySelector("img"),
    timer;
img.addEventListener("mousemove",function(){
    clearTimeout(timer);
    figure.classList.remove("paused");
    setTimeout(function(){
        figure.classList.add("paused");
    },300);
},0);

*{box-sizing:border-box;margin:0;padding:0;}
figure{
    display:inline-block;
    position:relative;
}
img{
    vertical-align:middle;
    transition:-webkit-filter .25s linear 99999s,filter .25s linear 99999s;
}
img:hover{
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
    transition-delay:0s;
}
figure::after{
    animation:colours 5s linear infinite;
    bottom:0;
    content:"";
    left:0;
    mix-blend-mode:overlay;
    opacity:0;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
    transition:opacity .25s linear 99999s;
}
figure:hover::after{
    opacity:.75;
    transition-delay:0s;
}
figure.paused::after{
    animation-play-state:paused;
}
@keyframes colours{
    0%{background:#f00;}
    16.667%{background:#ff0;}
    33.333%{background:#0f0;}
    50%{background:#0ff;}
    66.667%{background:#00f;}
    83.333%{background:#f0f;}
    100%{background:#f00;}
}

<figure>
    <img src="https://unsplash.it/500/500/?random">
</figure>

这篇关于鼠标移动时如何改变图像颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！