if mouseleave/Javascriptをクリックした場合

-2

要素の上にマウスを置いた場合、または実際にクリックした場合に何が起こるかを定義する方法はjavascriptにありますか？私が何をしたいかif mouseleave/Javascriptをクリックした場合

は、ボタンのため、次のとおりです。

onmouseenterは、背景色を変更することになっています。
その上にカーソルを置いてボタンをもう一度離すと、色が消えてしまいます。
これをクリックすると、色が「維持」されます。

if mouseout == true/ if click == true?

の線に沿ってこれを行う方法私はそれを探してみましたが、何も、本当に私の質問に答えていないがあります。事前にどうもありがとうございました！

編集：私は間違いなく、私はそれが簡単にCSS で行うことができるという事実を認識していJavaScriptでそれをやりたいの編集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"; 
};

要素がありますボタンがクリックされたときに "true"を返すと想定されている場合、element.onmouseout関数は、ボタンがクリックされていない場合にのみ使用されます。あなたのマウスがボタンの上にいればすぐにピンク色になり、すぐに白くなります。

出典

2017-10-19 A.S.J

これはトリッキーなJavaScriptやCSSのみを必要としません。（そして、：focus擬似クラスがあなたの要件を完全に満たしていない場合は、ボタンに "active"またはsthのような追加クラスを設定するためにJSが必要です） – CBroe

何を試しましたか？私たちはsthから始める必要があります... –

はいこれを行う方法があります – Huangism

-1

出典：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>

ピュアJavaScriptの例で、

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

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div id="foo">Hello!</div> 
 
    </body> 
 

 
</html>

あなたは（onClickのように）キャッチすることができますDOMイベントの多種多様な同様にあります。それらのほとんどを見つけるhere。

出典

2017-10-19 17:25:45 JustinJmnz

jQueryを使用してこれを行うことができます。怒鳴る私のコードを考えてみましょう：

\t <!DOCTYPE html> 
 
\t <html> 
 
\t <head> 
 
\t <title>Button Test</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t <button id="btn">Text</button> 
 
\t <script> 
 
\t var persistence = false; 
 

 
\t $("#btn").mouseenter(function() { 
 
\t \t $(this).css("background-color", "yellow"); 
 
\t }); 
 

 
\t $("#btn").click(function(event) { 
 
\t \t $(this).css("background-color", "yellow"); 
 
\t \t persistence = true; 
 
\t }); 
 

 
\t $("#btn").mouseleave(function(event) { 
 
\t \t if(persistence === false){ 
 
\t \t \t $(this).css("background-color", "inherit"); 
 
\t \t } 
 
\t }); 
 
\t </script> 
 
\t </body> 
 
\t </html>

出典

2017-10-19 17:59:06 fatih

if mouseleave/Javascriptをクリックした場合

答えて

関連する問題