0

ロールオーバー時に画像に境界線を追加しようとしています。画像をロールオーバーすると、境界線が表示されません。これが私のコードです：

<script>
$(document).ready(function() {
    $("#imgBorder").hover(
        function() { $(this).addClass("Hover"); },
        function() { $(this).removeClass("Hover"); }
    );
});
</script>
Hover { border: 1px solid #000; }
<div id="imgBorder"><a href="#">link...</a>

境界線がホバー時に表示されないのはなぜですか?

また、境界線を追加するときに画像のサイズを変更しないようにする方法はありますか?

4

4 に答える 4

2

画像のロールオーバーにホバーを追加するために JavaScript を使用する必要はありません。代わりに css クラスに追加してください。

<style language="text/css">
.rollOver : hover
{
    border: 1px solid #000;
}
</style>

<div class="rollOver" id="imgBorder">Test</div>
于 2012-04-11T20:47:19.040 に答える
1

まず、画像に影響を与えるには、jQuery を次のようにする必要があります。

$("#imgBorder img").hover(
    function() { $(this).addClass("Hover"); },
    function() { $(this).removeClass("Hover"); }
);

CSS は次のようになります。

.Hover { /* note the period preceding the 'Hover' class-name */
    border: 1px solid #000;
}

JS フィドルのデモ。

ご了承ください：

  • .stringのクラス名で要素を選択しますstring:<div class="string"></div>
  • #stringidに等しいによって要素を選択します。string <div id="string"></div>
  • stringの要素を選択しますstring:<string></string>

ただし、JavaScript は必要ありません。以下を使用してください。

#imgBorder:hover img,
#imgBorder img:hover {
    border: 1px solid #000;
}

JS フィドルのデモ。

于 2012-04-11T20:48:42.723 に答える
0

このようなものはCSSで機能します。以下のリンク

.rollover_img {
width: 280px;
height: 150px;
background-image: url(land.jpg); 
background-position: top;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:10px solid #ccc;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;
}

次のリンクに誘導します

http://aceinfowayindia.com/blog/2010/02/how-to-create-simple-css-image-rollover-effect/

于 2012-04-11T20:46:58.597 に答える
0

以下のセレクターでは、タグ名が「Hover」の要素をターゲットにしています。これは存在しません。

Hover { border: 1px solid #000; }

代わりに欲しかったのは：

.Hover { border: 1px solid #000 }

ここで他の人がすでに指摘しているように、:hover疑似クラスを使用できるため、これには JavaScript は必要ありません。

img { border: 1px solid #FFF }
img:hover { border-color: #000; }

詳細については、http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classesを参照してください。

于 2012-04-11T20:49:17.907 に答える