-1

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”上时，它会从图像中删除边框吗？无论如何，为什么文本与图像边框有任何关系？因为它在里面

4

2 回答 2

1

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

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

只需删除那个，它就会起作用。

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

.products li a img:hover {
   border:20px solid #FFFFFF;
}
于 2013-11-01T19:39:22.580 回答
0

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>
于 2013-11-01T19:43:21.290 回答