2

如何在缩略图周围悬停时正确指定 .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>

thumbs img 类最后有不同的数字，只是不确定。

4

3 回答 3

4

使用: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-04T20:20:58.223 回答
1

如果原始视图没有边框并且悬停视图有边框，我的解决方案有效

.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-04T22:10:46.900 回答
1 
.field-slideshow-thumbnail 
{
    border:solid 1px #ccc;
}
.field-slideshow-thumbnail:hover
{
    border:solid 1px #00f;
}
于 2012-09-04T20:21:12.833 回答