Home/ Questions/Q 8484503
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:23:54+00:00

How to correctly specify a .CSS border on hover around thumbnails? I want add

  • 0

How to correctly specify a .CSS border on hover around thumbnails? I want add external css for thumbnails, normal:

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

and hover:

  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>

The thumbs img class have different nubmers at the end, just not sure.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use the :hover selector:

    .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*/
}

    Assuming you put the above in a file called style.css (in the same directory as your webpage), you need to add this inside your <head> for the styles to apply:

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

    Hope that helped!

    • 0