我有一个图像 ( <img onmouseover="Over(this)" src="http://i.imgur.com/1B5QXiA.png"> )，颜色为黄色 ( http://i.imgur.com/1B5QXiA.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 = "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;
}
}<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>最佳答案
不，这里不需要 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)
}
}
关于javascript - 如果(鼠标按下){}，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37480298/