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>
 <a href="/shop/?add-to-cart=68&#038;_n=6e191bb906" class="button" rel="nofollow">Add to    cart</a>
 </li>
 </ul>

那里的HTML我正在讨论涉及到的css

.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;
}

你可以更好地看到它 http://www.gwendolynbarnes.com/shop/

但是当你将鼠标悬停在文字“Finis”上它从图像中删除边框？为什么文本无论如何都与图像边框有关？因为它里面有一个

Answer 1

问题是样式表中的以下规则：

.products li a:hover img {
   border:1px solid #BBBBBB;
}

只需删除它即可。

由于已为图像设置了边框，因此您还可以删除以下规则：

.products li a img:hover {
   border:20px solid #FFFFFF;
}

Answer 2

更好的解决方案是在这种情况下更改标记，因为css可能会应用于创建它的其他部分

所以我建议

而不是以下代码：

<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>

使用此内容：

<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>

将鼠标悬停在文本上会删除其上方<img/>的边框

2 个答案: