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＆amp;获得所需的行为？ HTML？

Answer 1

如果您希望边框显示在父元素（即容器框）上，您无法使用CSS将其视为父母（css不会＆＃ 39;有父母）。但是，如果你只想在你悬停的元素上使用它，你可以这样做：

 .zobacz:hover{}

将起作用，为此元素添加边框。

＆＃13;

.zobacz:hover {
  border: 5px solid #000;
}
.product-item {
  border: 1px solid #000;
}

＆＃13;

<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>

＆＃13;

当我悬停按钮时，框

1 个答案: