7

マウスがその上にあるとすぐに、要素の周りに境界線を作成したい。私は使用しようとしています:

$("body").mouseover(function(e){
    var element =  document.elementFromPoint(e.clientX,e.clientY);
    var target = $(e.target);
    if (target.is("div")) {
        element.style.border = "1px solid blue";
        currentElt = target;
    }
    element.onmouseout = function(){
        this.style.border = "0px";
    }
});

しかし、何が起こるかというと、ボーダーの近くにある DOM 要素の位置が乱れるためです。だから、私が考えているのは、その要素の周りに透明なDIVを作成し、マウスアウトでその透明なDIVを削除することです。

このアイデアで私を助けてください。私は理解することができません。これを行う方法 ？

4

7 に答える 7

30

他の回答が示唆するように、CSS を使用してこれを行うことができます。

しかしどうなるかというと、border が原因で、DOM 要素の位置に近づくと乱れます。だから、私が考えているのは、その要素の周りに透明な DIV を作成することです。そしてマウスアウト。それを削除します。

その場合、代わりにを使用outlineする必要があるようですborder。

div:hover {
    outline: 1px solid blue;
}

http://jsfiddle.net/thirtydot/Xuddz/

アウトラインは要素の「上」に描画されるため、他の要素の位置が妨げられることはありません。

于 2012-04-13T09:16:34.950 に答える
5

これは JavaScript/jQuery の問題ではありません! 代わりに CSS を使用してください。

div:hover {
    border: 1px solid blue;
}

隣接する要素を妨害する効果を無効にするために、通常の状態ではその周囲に透明な境界線を使用します。

div {
    border: 1px solid transparent;
}
于 2012-04-13T09:13:47.670 に答える
4

これには単純に CSS を使用します。例:

div { background: red; border: 1px solid transparent; }
div:hover { border: 1px solid green; }

デモ: http://jsfiddle.net/KQzRh/

アップデート

@thirtydotの答えが好ましい方法ですが、IE7はそれをサポートしていないことに注意してください（IE6はどちらもサポートしていないと思います）。繰り返しになりますが、IE7 をサポートするかどうかはあなた次第です。

その場合、次のようにします。

div:hover { outline: 1px solid green; }
于 2012-04-13T09:14:01.517 に答える
3

ホバー時に表示される境界線の幅に等しい白/透明の境界線が必要です。

.element { border: 1px solid transparent; }
.element:hover { border: 1px solid #000; }
于 2012-04-13T09:16:47.557 に答える
1

これは単純な問題で、css のみで実行できます。これを試してみてください

<html xmlns="http://www.w3.org/1999/xhtml">     
  <head>
    <title>Horton Computer Solutions Home</title>
  </head>

  <style type="text/css">
    .some_class:hover{
      color: orange;
      border:2px solid #3300FF;
     }
  </style>
<body>
  <div class="some_class" style="width:290px;"> some text here <br/></div>
 </body>
</html>
于 2012-04-13T09:26:20.417 に答える
1

本当に JS / jQuery を使用したい場合mouseoverは、ボディではなく div に (つまりホバー) ハンドラーをバインドする必要があります (面倒なコンテキスト設定を節約できます)。お気に入り：

$('div').hover(function(){
   $(this).css('border','1px solid blue');
},function(){
   $(this).css('border','1px solid transparent');
});

このフィドルを参照してください。

しかし、繰り返しますが、これはプレーンな CSS で行うこともできます (はるかに優れており、より簡単です):

div:hover{
border: 1px solid blue;
}

別のフィドルを見る

を使用borderするとレイアウトが不安定になる場合 (境界線が要素の寸法に追加されるため)、代わりに使用できますoutline(@thirtydot の回答から恥知らずに盗まれました)。

于 2012-04-13T09:18:13.923 に答える