When i hover button, border on box

Question

I want border on my box, when I hover on button with class .zobacz

This is what I have tried but it does not work.

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

Is there any way to get the desired behavior using only CSS & HTML?

You're targeting the wrong thing. ~ is a sibling selector. You want to use > or possibly even no connector at all. If you just use: .product-item .zobacz{} You should be fine. Also remember the elements, are inline elements. Set it to display: inline-block or block for more desire behaviors as well. — Andrew Ice, Jun 17 '15 at 14:52
As pointed out there are no parent selectors in CSS however you can mimic the desired behaviour using slightly amended markup and styles as shown in this [demo](http://jsfiddle.net/dszLb8rz/) — Dan Hayden, Jun 17 '15 at 19:03

score 2 · Answer 1 · edited Jun 17 '15 at 14:19

If you want the border to appear on the parent element (i.e. the container box), you can't do this using CSS seeing as that's a parent (css doesn't have a parent). However, if you just wanted it on the element you hover, you can do:

 .zobacz:hover{}

which will work, adding a border to this element.

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

@jaskowice1 If you want to add a border around the box you'll have to use javascript since the box is a parent of the `a`-tag. — Natalie Hedström, Jun 17 '15 at 14:01

When i hover button, border on box

1 Answers1