Borders not changing on hover

[plato]

borders surrounding the image thumbnail should change colour on hover but it doesnt seem to be working and I cant figure it out:

My CSS snippet:

Code: Select all

 #mr-preview {
    float:                     left;
    width:                     100%;
    padding-left:             17px;
    padding-bottom:         10px;
    }
    
#mr-preview ul { 
    list-style-type:         none;
    margin:                 0 15px;
    padding:                0;
    }
    
#mr-preview li { 
    float:                     left;
    width:                     100px;
    height:                 100px;
    margin:                 0 10px 0 0;
    }
    
#mr-preview img { 
    display:                 block;
    width:                     80px;
    height:                 80px;
    margin:                    10px 10px;
    border-thickness:         1px;
    border-width:             thick;    
    border-style:             solid;
    border-color:             #999999;
    }

ul#mr-preview a { 
    border-thickness:         1px;
    border-width:             thick;    
    border-style:             solid;
    border-color:             #999999;
    }
    
ul#mr-preview a:hover {
    border-thickness:         1px;
    border-width:             thick;    
    border-style:             solid;
    border-color:             #FF6600;
    }

My HTML snippet:

Code: Select all

                <span id="mr-preview"><ul>
                <li><a href="/portfolio/testa/"><img src="site_th/th_testa.png" alt="testa"></a></li>
                <li><a href="/portfolio/testb/"><img src="site_th/th_testb.png" alt="testb"></a></li>
                </ul></span>

[plato]

Nevermind, answer is here:

Code: Select all

#mr-preview a:link img { 
    border-thickness:         1px;
    border-width:             thick;    
    border-style:             solid;
    border-color:             #999999;
    }
    
#mr-preview a:hover img {
    border-thickness:         1px;
    border-width:             thick;    
    border-style:             solid;
    border-color:             #FF6600;
    }

[pa007]

Or you can do them shorthand like this:

Code: Select all

#mr-preview a:link img {
border: 1px solid #999;
}

#mr-preview a:hover img {
border: 1px solid #f60;
}

A bit tidier.

Pete.