CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20041

On anchor hover add border or box-shadow for image

I need to add border or box-shadow to image when i hover over a link. hover should show animated circle around the round image. I am using following css but it is not working.

https://codepen.io/anon/pen/mArEoX

<div class="sub-page-menu-item-w">
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
  <a href="/location/" class="sub-page-menu-a">Location</a>
</div>

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}

Upvotes: 0

Views: 1869

Answers (2)

Asons
Asons

Reputation: 87303

As there is no previous sibling selector or a parent selector we can do a little trick here, using flexbox and its order property.

In below sample the anchor is before the image div/img group in the markup, and then their order is swapped by giving the anchor order: 1 and its parent display: flex

Also, the sibling selector ~ is for siblings, not children, so it has to target the image div, which will target the img, like this .sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle

.sub-page-menu-item-w {
  display: flex;
  flex-direction: column;
}
.sub-page-menu-item-w a {
  order: 1;
}

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}
<div class="sub-page-menu-item-w">
  <a href="/location/" class="sub-page-menu-a">Location</a>
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
</div>

Upvotes: 1

Turnip
Turnip

Reputation: 36742

The general sibling selector (~) will not find elements that precede the element to the left of the selector. To make this work you would have to switch the order of the sub-page-menu-a and sub-page-menu-img in your HTML.

However, this still will not work as img-circle is not a sibling of sub-page-menu-a.

Working code:

.img-circle{
  border-radius:100%;
}
.sub-page-menu-a:hover ~ .sub-page-menu-img .img-circle {
  display: block;
  box-shadow: 0 0 0 14px #B28164 !important;
}
.sub-page-menu-a:hover {
  color:green !important;
  font-size:18px !important;
}
<div class="sub-page-menu-item-w">
  <a href="/location/" class="sub-page-menu-a">Location</a>
  <div class="sub-page-menu-img">
    <img src="http://dummyimage.com/200x200/0066ff/fff" class="sub-page-menu-imgx img-responsive img-circle">
  </div>
</div>

Upvotes: 1

Related Questions