基础5 - 删除/重写CSS缩略图蓝色悬停效果

Question

我正在使用基础5，我真的很难找到我需要自定义它的CSS。有很多关于如何覆盖默认值但不包含CSS的SCSS示例。我正在使用firebug尝试获取用于覆盖的样式，但这确实很难。

目前我一直试图用缩略图改变图像上的蓝色鼠标悬停效果。我想更换颜色，或完全消除这种影响。我尝试过以下不同的变体：

a.th:hover  {
    border: none;
}

a.th img {
    border:  none;
    outline:  none;
}


<article class="large-3 small-6 columns product-box">
    <a class="th" href="#"><img src="images/denim_jacket.jpg"></a>
    <div class="panel">
        <h5><a href="#">Levi´s Blue Denim</a></h5>
        <span class="price">£40.00</span>
    </div>
</article>

我从以下页面获取了代码：

http://foundation.zurb.com/docs/components/thumbnails.html

Answer 1

下面的代码是原始的css值。你可以改变它以适应你想要的效果。

a.th:hover, a.th:focus {
 -webkit-box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5);
 box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5);
}