应该像这样在整个 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&" 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&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?&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&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&lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
</div>
</li>
</ul>
</body>
</html>最佳答案
OK，解决方法很简单，看“.picturelist-item:hover”，分号前没有空格。 :) 祝你有美好的一天。
.picturelist-item:hover {
border: 1px solid red;
}<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&" 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&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?&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&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&lang=et" tabindex="0" role="button" class="btn btn-warning">Add to favorites</a>
</div>
</li>
</ul>
</body>
</html>关于html - 如何仅在悬停时在整个描述周围添加边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37620201/