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（Webページと同じディレクトリにある）というファイルに入れたとする<head>と、スタイルを適用するには、これを自分の中に追加する必要があります。

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

お役に立てば幸いです。

于 2012-09-04T20:20:58.223 に答える
1 
.field-slideshow-thumbnail 
{
    border:solid 1px #ccc;
}
.field-slideshow-thumbnail:hover
{
    border:solid 1px #00f;
}
于 2012-09-04T20:21:12.833 に答える
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 に答える