javascript - マウスホバーを表示して維持するためのDiv-マウスアウトしてもアップを維持

Question

私はdivをホバーするいくつかの方法で遊んでいますが、私がテストした方法のほとんどは、マウスがリンク上にホバーしているときにのみ起動し続けます。

私が達成したいのは、divが別のdivのホバーに表示されることですが、マウスがdivボタンを離れても表示されたままになります。

例：http：//www.prixtel.com/

CSSだけでも、Jquery/JSと混合してもかまいません。

ありがとうございました！

私のサンプル： http： //jsfiddle.net/h4rB9/1/

Answer 1

jQuery .mouseover() bindなどを使用して、div を表示する (display: none または何でもオフにする) イベントを mouseover イベントにバインドします。.mouseout() バインドを指定しないと、消えません。

Answer 2

そのウェブサイトは、その効果のためにスクリプトを使用しています。

JavaScript を使用する場合:

var myDiv = document.getElementById("myDiv");
if (document.addEventListener) {
  myDiv.addEventListener("mouseover", function () {
    // whatever it is you're doing on mouseover here
  }, false);
} else if (document.attachEvent) {
  myDiv.attachEvent("onmouseenter", function () {
    // whatever it is you're doing on mouseover here
  });
} else {
  myDiv.onmouseover = function () {
    // whatever it is you're doing on mouseover here
  }
}

jQuery:

// I prefer mouseenter to mouseover, and jQuery lets you do that as does IE with attachEvent

$("#myDiv").mouseenter(function () {
  // whatever it is you're doing on mouseover here
});

他のポスターが指摘したように、キーはマウスアウトイベントを省略することです.ホバーを使用すると、マウスアウト動作が自動的に含まれます.