Question

应该围绕整个li元素绘制购物车边框，如下所示：

我尝试使用

.picturelist-item :hover  {
    border: thin ridge #bbb;
}

我试图把这个类放到li元素，也放到li里面的div。这将绘制li内部每个元素的边界。不显示所有元素的div边框。我该如何解决这个问题，以便在悬停时整个产品元素周围出现边框？

使用了bootstrap3，jQuery-ui。

<html>
<head>

<style type="text/css">

.picture { border: none;
margin: 1px;
}

.picturelist-item :hover  {
    border: thin ridge #bbb;
}

img {
    border: none;
}

.category-list li {
    width: 130px;
    float: left;
    margin: 10px;
    text-align: center;
}
.category-list {
    list-style: none;
}


  </style>
</head>
<body>
<ul class="category-list">
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="#">
                            <img src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="#">
                                Peak's Glut.vaba leivajahu segu, pruun 450g
                                <br>
2,24  €
                            </a>
                        </div>
                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201120">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a class="btn btn-warning" href="#">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="#">
                            <img alt="Peak's Glut.vaba Pannkoogijahu 300g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="#">
                                Peak's Glut.vaba Pannkoogijahu 300g
                                
                                <br>
                                

1,87  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201122">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201122&amp" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="/store/Store/Details/201121?lang=et">
                            <img alt="Peak's Glut.vaba saiajahu segu 450g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="#">
                                Peak's Glut.vaba saiajahu segu 450g
                                
                                <br>
                                

1,93  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201121">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201121&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="/store/Store/Details/201124?&amp;lang=et">
                            <img alt="Peak's Glut.vaba Tatrajahu 500g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="/store/Store/Details/201124?lang=et">
                                Peak's Glut.vaba Tatrajahu 500g
                                
                                <br>
                                

2,35  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201124">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201124&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="/store/Store/Details/201123?lang=et">
                            <img alt="Peak's Glut.vaba universaalne küpsetusjahu 450g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="/store/Store/Details/201123?lang=et">
                                Peak's Glut.vaba universaalne küpsetusjahu 450g
                                
                                <br>
                                

2,35  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201123">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201123&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
    </ul>

</body>
</html>

Answer 1

好的，解决方案非常简单，请查看＆＃34; .picturelist-item：hover＆＃34;，，分号前没有空格。 :)祝你有个美好的一天。

＆＃13;

.picturelist-item:hover {
   border: 1px solid red;
}

＆＃13;

<html>
<head>

<style type="text/css">

.picture { border: none;
margin: 1px;
}

 <!-- error is here: remove the space before : -->
.picturelist-item :hover  {   
    border: thin ridge #bbb;
}

img {
    border: none;
}

.category-list li {
    width: 130px;
    float: left;
    margin: 10px;
    text-align: center;
}
.category-list {
    list-style: none;
}


  </style>
</head>
<body>
<ul class="category-list">
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="#">
                            <img src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="#">
                                Peak's Glut.vaba leivajahu segu, pruun 450g
                                <br>
2,24  €
                            </a>
                        </div>
                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201120">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a class="btn btn-warning" href="#">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="#">
                            <img alt="Peak's Glut.vaba Pannkoogijahu 300g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="#">
                                Peak's Glut.vaba Pannkoogijahu 300g
                                
                                <br>
                                

1,87  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201122">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201122&amp" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="/store/Store/Details/201121?lang=et">
                            <img alt="Peak's Glut.vaba saiajahu segu 450g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="#">
                                Peak's Glut.vaba saiajahu segu 450g
                                
                                <br>
                                

1,93  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201121">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201121&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="/store/Store/Details/201124?&amp;lang=et">
                            <img alt="Peak's Glut.vaba Tatrajahu 500g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="/store/Store/Details/201124?lang=et">
                                Peak's Glut.vaba Tatrajahu 500g
                                
                                <br>
                                

2,35  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201124">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201124&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
                <li>
                    <div class="picturelist-item">
                        <a class="picture ui-corner-all" href="/store/Store/Details/201123?lang=et">
                            <img alt="Peak's Glut.vaba universaalne küpsetusjahu 450g" 
src="http://placehold.it/70x100">
                        </a>
                        <div class="pildidnimekiri-nimetus">
                            <a href="/store/Store/Details/201123?lang=et">
                                Peak's Glut.vaba universaalne küpsetusjahu 450g
                                
                                <br>
                                

2,35  €
                            </a>
                        </div>

                            <form class="js-addtocart-form" method="post">
                                <span>
                                    <input type="hidden" name="product" value="201123">
                                    <input class="amount ui-corner-all" name="quantity" type="hidden" value="1" size="3" min="0" step="1">
                                </span>
                                <input type="submit" value="Add to cart" class="btn btn-success btn-sm">
                            </form>
        <a href="/store/Store/AddToWishList?Product=201123&amp;lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
                    </div>
                </li>
    </ul>

</body>
</html>

＆＃13;

Answer 2

你的风格似乎只是一个小问题。

.picturelist-item:hover {
    border: thin ridge #bbb;
}

删除.picturelist-item和:hover之间的空格。然后，您将拥有一个围绕整个元素容器的边框。

我还建议在元素周围添加透明边框。当前处于悬停状态时，添加边框会将大小调整几个像素，从而导致页面上的内容移动。如果你有一个透明的边框，它就解决了这个问题（还有其他方法可以解决它，这只是一个简单的方法。

.picturelist-item  {
    border: thin ridge transparent;
}

Answer 3

使用CSS状态选择器时，元素选择器和状态选择器之间不应有任何空格。所以你的CSS代码应该如下所示。

.picturelist-item:hover {
    border: thin ridge #bbb;
}

如何仅在悬停时在整个描述周围添加边框？

3 个答案: