<分区>
<分区>
当我将鼠标悬停在带有 .zobacz 类的按钮上时，我希望我的盒子上有边框
这是我尝试过的方法，但它不起作用。
.product-item ~ .zobacz:hover {
border:5px solid #000;
}
.product-item{
border:1px solid #000;
}<div class="product-item">
<a href="#" class="title">Platin</a>
<a href="#" class="title-2">78411/35/30</a>
<a href="#" class="product-item-image"><img src="images/image-product-list.jpg"></a>
<span class="price">Cena: </span>
<span class="price-2">265zł</span>
<span class="price-3">NETTO</span>
<div class="clearfix"></div>
<a href="#" class="zobacz">Zobacz</a>
</div>有什么方法可以仅使用 CSS 和 HTML 来获得所需的行为吗？
最佳答案
如果您希望边框出现在父元素(即容器框)上，您不能使用 CSS 执行此操作，因为它是父元素(css 没有父元素) . 但是，如果您只想在悬停的元素上使用它，您可以这样做:
.zobacz:hover{}
这将起作用，为这个元素添加一个边框。
.zobacz:hover {
border: 5px solid #000;
}
.product-item {
border: 1px solid #000;
}<div class="product-item">
<a href="#" class="title">Platin</a>
<a href="#" class="title-2">78411/35/30</a>
<a href="#" class="product-item-image">
<img src="images/image-product-list.jpg">
</a>
<span class="price">Cena: </span>
<span class="price-2">265zł</span>
<span class="price-3">NETTO</span>
<div class="clearfix"></div>
<a href="#" class="zobacz">Zobacz</a>
</div>关于html - 当我悬停按钮时，框上的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30892639/