Hover over text removes border of <img> above it - php

Question

http://www.gwendolynbarnes.com/shop/
<ul class="products">
<li class="product first">
<a href="http://www.gwendolynbarnes.com/product/finis/">
<img width="117" height="150" src="http://www.gwendolynbarnes.com/wp-content/uploads/2013/11/1418362_10202191776019152_824444076_n-117x150.jpg" class="attachment-shop_small wp-post-image" alt="1418362_10202191776019152_824444076_n" />
<strong>Finis</strong>
<span class="price">$3,000</span>
</a>
Add to cart
</li>
</ul>
There the HTML im talking about heres the css involved
.products li .price {
color: #fff;
font-weight: bold;
font-size: 18pt;
color: #248022;
}
.products li strong {
font-size: 16pt;
padding-bottom: 10px;
color: #000;
}
.products li {
padding: 10px;
margin: 12px;
}
ul.products li {
width: 30%;
float: left;
padding-left: 100px;
}
.products li a img {
border: 20px solid #fff;
width: 175px;
height: auto;
margin-left: 15px;
margin-right: auto;
}
.products li a img:hover {
border: 20px solid #fff;
}
ul.products {
width: 100%;
float: left;
padding-left: 50px;
}
.products li {
padding: 0px 15px 0px 15px;
background-color: #fff;
border: 20px solid #fff;
}
a.button:hover, button.button:hover, input.button:hover, #review_form #submit:hover {
background: #71d56e;
text-decoration: none;
color: #000;
font-weight: bold;
}
a.button, button.button, input.button, #review_form #submit {
background: #ddd;
text-decoration: none;
color: #000;
font-weight: bold;
}
.products li strong {
font-size: 16pt;
color: #000;
}
You can see it better at
http://www.gwendolynbarnes.com/shop/
But when you hover over the text "Finis"
It removes the border from the image?
Why would the Text have anything to do with the image border anyways? because its inside a

Answer 1

The problem is the following rule in you stylesheet:
.products li a:hover img {
border:1px solid #BBBBBB;
}
Just remove that one and it will work.
Since the border is already set for the image, you could also remove the following rule:
.products li a img:hover {
border:20px solid #FFFFFF;
}

Answer 2

The better solution would be to change the markup in this case as the css may get applied to some other section for which it was created
So I'd suggest
Instead of the code below:
<a href="http://www.gwendolynbarnes.com/product/finis/">
<img width="117" height="150" alt="1418362_10202191776019152_824444076_n" class="attachment-shop_small wp-post-image" src="http://www.gwendolynbarnes.com/wp-content/uploads/2013/11/1418362_10202191776019152_824444076_n-117x150.jpg">
<strong>Finis</strong>
<span class="price">$3,000</span>
</a>
Use this one:
<a href="http://www.gwendolynbarnes.com/product/finis/">
<img width="117" height="150" alt="1418362_10202191776019152_824444076_n" class="attachment-shop_small wp-post-image" src="http://www.gwendolynbarnes.com/wp-content/uploads/2013/11/1418362_10202191776019152_824444076_n-117x150.jpg">
</a>
<strong>Finis</strong>
<span class="price">$3,000</span>