Question

我有一个黄色（http://i.imgur.com/1B5QXiA.png）的图像（<img onmouseover="Over(this)" src="http://i.imgur.com/1B5QXiA.png">），我希望它能够在鼠标进入时变成橙色（i.imgur.com/DPRWTbH.png）图像或红色（i.imgur.com/fFJxCeY.png），如果它按下（按下），就像一个按钮。

我知道我可以使用图像的onmouseover和onmouseout事件来更改变量（我认为有些人称之为标志），但问题是这不起作用如果你在浏览器/文档/窗口之外释放（停止按下）鼠标，因为变量不会改变。

因此，除非在浏览器/文档/窗口之外发生onmouseup事件，否则我必须检查鼠标是否显示在图像的事件onmouseover上。

这是我到目前为止的代码：

＆＃13;

var Mouse = false;
var Pressing = false;

function Body() {
  if (Mouse && Pressing) {
    document.getElementById(Pressing).src = "http://i.imgur.com/DPRWTbH.png";
  }
  Pressing = false;
}

function Down(Element) {
  Element.src = "http://i.imgur.com/fFJxCeY.png";
  Pressing = Element.id;
}

function Out(Element) {
  Element.src = "http://i.imgur.com/1B5QXiA.png";
  Mouse = false;
}

function Over(Element) {
  if (Pressing == Element.id) {
    Element.src = "http://i.imgur.com/fFJxCeY.png";
    Mouse = Element.id;
  } else if (Pressing == false) {
    Element.src = "http://i.imgur.com/DPRWTbH.png";
    Mouse = Element.id;
  }
}

＆＃13;

<body onmouseup="Body()">
  <img draggable="false" id="1" onmousedown="Down(this)" onmouseout="Out(this)" onmouseover="Over(this)" onmouseup="Up(this)" src="http://i.imgur.com/1B5QXiA.png">
  <img draggable="false" id="2" onmousedown="Down(this)" onmouseout="Out(this)" onmouseover="Over(this)" onmouseup="Up(this)" src="http://i.imgur.com/1B5QXiA.png">
  <br><textarea id="t"></textarea>
</body>

＆＃13;

Answer 1

不，这里不需要javascript。

使用css：https://jsfiddle.net/o27fcegr/

img {
    &:hover {
        content: url(http://i.imgur.com/DPRWTbH.png)
    }
    &:active {
        content: url(http://i.imgur.com/fFJxCeY.png)
    }
}

if（MouseDown）{}

1 个答案: