如何在懸停的圖像上添加邊框？

我正在嘗試在翻滾時向圖像添加邊框。當我翻轉圖像時，邊框不顯示。這裏是我的代碼：如何在懸停的圖像上添加邊框？

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

爲什麼邊界不出現在懸停？

此外，有沒有辦法做到這一點，以便它在添加邊框時不重新調整圖像的大小？

來源

2012-04-11 droidus

有沒有辦法做到這一點，以便它不添加邊框時重新調整圖像的大小？ – droidus 2012-04-13 17:25:27

像這樣的事情會在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-11 20:46:58

你不需要使用JavaScript來對圖像添加懸停滾下。只需將其添加到CSS類。

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

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

來源

2012-04-11 20:47:19

請注意，IE6不支持除錨點之外的其他任何東西：懸停選擇器。 – 2012-04-11 20:52:55

首先，影響形象，你的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它們的類名選擇元件（S）元素string：<string></string>

但你並不需要的JavaScript，只需使用：

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

JS Fiddle demo。

來源

2012-04-11 20:48:42

在下面的選擇器中，您定位的是標記名爲「懸停」的元素。這不存在。

Hover { border: 1px solid #000; }

你想要什麼，而不是爲：

.Hover { border: 1px solid #000 }

正如其他人在這裏已經指出的那樣，你並不需要的JavaScript這是你可以使用:hover僞類：

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

有關進一步閱讀，請參閱http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

來源

2012-04-11 20:49:17 Sampson

如何在懸停的圖像上添加邊框？

回答

相關問題