Question

首先，抱歉这个奇怪的标题，我真的不知道更好的描述方式。

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

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

当鼠标移动时，颜色会发生变化。

我知道CSS中有hover属性，但它只有2个状态，当鼠标悬停在它上面时，当它没有时，我正在寻找的东西有点棘手。

希望这能解释它：/

Answer 1

请试试这个：

document.getElementById("myDiv").onmousemove = function() {
  //Set random background color
  myDiv.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}

演示：

＆＃13;

document.getElementById("myDiv").onmousemove = function() {
  //Set random background color
  myDiv.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}

＆＃13;

#myDiv {
  width: 150px;
  height: 150px;
  background-color: #ccc;
  text-align: center;
  line-height: 140px;
}

＆＃13;

<div id="myDiv">Hover ME !</div>

＆＃13;

Answer 2

您可以使用CSS动画实现此目的，使用Javascript在鼠标移动到图像上时切换类，或者停止这样做。

如果图像已经不存在，则需要将图像包装在另一个标记中，然后需要将伪元素添加到该标记中，将其定位为直接位于图像顶部，并使用opacity的初始0。我们通过设置后者的mix-blend-mode属性来确保图像在伪元素后面可见。当鼠标首先在图像上移动时，它可选地转换为灰度，并且伪元素的background-color开始动画。当鼠标停止移动时，JavaScript中的超时会向父元素添加一个类，该类将伪元素的animation-play-state属性设置为paused，并且当再次移动鼠标时，此类为除去。

你可以改进＆amp;通过编辑CSS来调整此处的所有内容（例如，删除图像＆{39} filter，添加/删除keyframes，修改mix-blend-mode，调整animation-duration ，无需触摸JavaScript。

＆＃13;

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

＆＃13;

*{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;}
}

＆＃13;

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

＆＃13;

Answer 3

我在这里张贴，因为我几乎需要这样的东西。我需要在每次鼠标移动时改变背景位置。图像设置为背景，这是图像：

http://pbdlbd.org/ipositive/wp-content/uploads/2015/02/one10.jpg

我想在每次鼠标移动时移动背景位置。该图像有4个部分（每个部分的高度为523px），首先显示顶部，鼠标移动后显示第2部分，另一个鼠标移动显示第3部分，第4部分后将重复进一步的鼠标移动它。从图像中删除鼠标后，它将显示图像的默认顶部。

这样的事情：

document.getElementById("#ipos .flex_cell").onmousemove = function() {
  //Set background position 523px bottom on each mouse move
  #ipos .flex_cell.style.background-position = center -523px (here i can't make it so that it changes to -1046px by code);
}

Here是网站

TIA

鼠标移动时如何使图像改变颜色？

3 个答案: