Question

javascript中是否有一种方法可以定义发生的情况，具体取决于您是将鼠标悬停在元素上还是实际点击它？

我想要做的是，按一下按钮：

onmouseenter，背景颜色应该改变。
如果你只是将鼠标悬停在它上面并再次离开按钮，颜色应该会消失。
如果单击它，颜色应该是＆＃34;保持＆＃34;。

有没有办法按照if mouseout == true/ if click == true?

的方式执行此操作

我试过看，但没有真正回答我的问题。非常感谢你提前！

编辑：我当然希望在Javascript中实现它，我意识到它可以在CSS中轻松完成编辑2：这是我试过的：

var ifclick = false;
element.onclick = function() {
    element.style.background = "pink";
    element.style.borderColor = "pink";
    ifclick = true;
};

if (ifclick == false) {
    element.onmouseout = function() {
        element.style.background = "white";
        element.style.borderColor = "white";
    };
}
else {
    element.style.background = "pink";
    element.style.borderColor = "pink";
};

元素是鼠标进入的按钮，ifclick应返回＆＃34; true＆＃34;单击按钮时，如果没有单击该按钮，则仅应该使用element.onmouseout函数，但由于某种原因（如下所述），只要您的鼠标仍在按钮上并且变为白色，该按钮就会变为粉红色你一离开就会。

Answer 1

您可以使用jQuery来完成此操作。请考虑我的代码：

＆＃13;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Button Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
	<button id="btn">Text</button>
	<script>
	var persistence = false;

	$( "#btn" ).mouseenter(function() {
		$( this ).css("background-color", "yellow");  
	});

	$( "#btn" ).click(function(event) {
		$( this ).css("background-color", "yellow");
		persistence = true;
	}); 

	$( "#btn" ).mouseleave(function(event) {
		if( persistence === false){
			$( this ).css("background-color", "inherit");
		}
	});
	</script>
	</body>
	</html>

＆＃13;

Answer 2

从W3 School取得鼠标悬停。

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

也可以从W3 School获取鼠标点击。

<body onmousedown="whichElement(event)">

<强>更新

根据您的说法，您需要一种方法可以在鼠标进入某个区域时添加.class，并在离开该区域时删除.class。查看this。

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>

Pure Javascript示例，

＆＃13;

window.onload = function() {
 var htmlElement = document.getElementById("foo");
    var clicked = false;

    document.getElementById("foo").addEventListener("mouseover", function(){
        if(!clicked) {
            htmlElement.style.color = "red";
        }
    });
    document.getElementById("foo").addEventListener("mouseout", function(){
        if(!clicked) {
            htmlElement.style.color = "black";
        }
    });
    document.getElementById("foo").addEventListener("click", function(){
        htmlElement.style.color = "red";
        clicked = (clicked ? false : true);
    }); 
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="foo">Hello!</div>
  </body>

</html>

＆＃13;

您可以捕获各种各样的DOM事件（如onClick）。找到大部分here。

如果mouseleave /如果点击Javascript

2 个答案: