如何指定懸停在縮略圖周圍的CSS邊框？

如何正確指定懸停在縮略圖周圍的.CSS邊框？我想添加外部CSS的縮略圖，正常：如何指定懸停在縮略圖周圍的CSS邊框？

border-color: #cccccc; 
border-style: solid; 
border-width: 1px;

和懸停：

border-color: #0000FF; 
    border-style: solid; 
    border-width: 1px;

HTML：

<div class="item-list"><ul id="field-slideshow-1-pager" class="field-slideshow-pager slides-4"> 
<li class="first"><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-1" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41MNf5JEQ1L._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> 
<li><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-2" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/410ONnNmmJL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> 
<li><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-3" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41lyduCW9CL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> 
<li class="last"><a href="#"><img class="field-slideshow-thumbnail field-slideshow-thumbnail-4" typeof="foaf:Image" src="http://ecx.images-amazon.com/images/I/41VHLWxrbcL._SL75_SS45_.jpg" width="80" height="80" alt="" /></a></li> 
</ul></div>

的大拇指IMG類在結尾處不同nubmers ，只是不確定。

來源

2012-09-04 fxgreen

使用:hover選擇：

.field-slideshow-thumbnail { 
    border-color: #cccccc; 
    border-style: solid; 
    border-width: 1px; 
} 
.field-slideshow-thumbnail:hover { 
    border-color: #0000FF; 
    /*no need to specify border-style and border-width again*/ 
}

假設你把上面一個叫style.css文件（在相同的目錄中的網頁），你需要添加這個您<head>內的應用方式：

<link type = "text/css" rel = "stylesheet" href = "style.css"/>

希望有幫助！

來源

2012-09-04 20:20:58 Chris

無需再次指定'邊境width'和'邊境style' :) – Ana

@Ana哈哈，是的，謝謝:) *我臉紅犯愚蠢的錯誤。* – Chris

'字段幻燈片縮略圖-x'部分是不相關的風格？ – fxgreen

.field-slideshow-thumbnail 
{ 
    border:solid 1px #ccc; 
} 
.field-slideshow-thumbnail:hover 
{ 
    border:solid 1px #00f; 
}

來源

2012-09-04 20:21:12 Shmiddty

非常感謝，這有所幫助。 – fxgreen

只是一個說明：當使用這樣的css構造？ 'a：hover .image {0} {0}} border-color：＃cc6600; border-style：solid; border-width：1px; }' – fxgreen

我的解決辦法工作，如果原來的視圖沒有邊界和懸停查看有沒有邊界

.field-slideshow-thumbnail 
{ 
    float:left; 
    /*NO BORDERS HERE*/ 
} 
.field-slideshow-thumbnail:hover 
{ 
    border:solid 1px #00f; 
    /*NOTE that the negative value of margin to prevent the change in spaces */ 
    margin:-1px; 
}

來源

2012-09-04 22:10:46 egystr

如何指定懸停在縮略圖周圍的CSS邊框？

回答

相關問題