if (MouseDown) {}

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

我知道我可以有一个变量（我认为有些人称之为标志），它随着图像的onmouseover和onmouseout事件而变化，但问题是，如果您释放（停止按下）鼠标在浏览器/文档/窗口之外，这是行不通的，因为变量不会改变。

因此，除非浏览器/文档/窗口之外有onmouseup事件，否则我必须检查鼠标是否按下图像的事件onmouseover。

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

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 = "https://i.stack.imgur.com/07u0R.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;
  }
}

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

不，这里不需要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)
    }
}

相关内容

最新更新

热门标签：