当我悬停按钮时，框上的边框

Question

当我将鼠标悬停在.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就能得到想要的行为？

Answer 1

如果你想让边框出现在父元素(即容器框)上，你不能使用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>

​