Question

如何在缩略图上悬停时正确指定.CSS边框？我想为缩略图添加外部CSS， normal：

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，只是不确定。

Answer 1

使用: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"/>

希望有所帮助！

Answer 2

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

Answer 3

如果原始视图没有边框且悬停视图具有边框

，则我的解决方案有效

.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;
}

如何在缩略图上悬停时指定CSS边框？

3 个答案: