ホバーの画像にボーダーを追加するには？

Question

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

<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> 

なぜホバーに表示されないのですか？

また、ボーダーを追加するときに画像のサイズを変更しないようにする方法はありますか？このような

Answer 1

何かが、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; 
} 

下記のリンクに動作します私はあなたが画像上にホバーを追加するためにJavaScriptを使用する必要はありません、以下のリンク

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

Answer 2

にご案内します転がる。代わりに、代わりにcssクラスに追加してください。

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

<div class="rollOver" id="imgBorder">Test</div> 

Answer 3

画像に影響を与え、まず、お使いの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 Fiddle demo。 <div class="string"></div>

#stringそのidによって要素を選択し、string<div id="string"></div>

string選択に等しい：

• .stringはstringのそのクラス名によって要素（複数可）を選択：

  留意されたいです。 stringの要素：<string></string>

しかし、あなたはJavaScriptを必要としないが、ちょうど使用：

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

JS Fiddle demo。

Answer 4

以下のセレクタでは、タグ名が「ホバー」の要素をターゲティングしています。これは存在しません。

あなたの代わりに何を望むか

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