Changing a DIV on hover of an anchor link

Question

I'm attempting to change a div when hovering ANY anchor link within a document. It only works when it's not inside any other container.

Is there anyway to have this work within a usual page layout (inside body>divs)?

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 5;
  height: 32px;
  width: 32px;
  background-color: #0081ff;
  pointer-events: none;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
  transform: translate3d(0, 0, 0);
}
  
.circle:hover ~ #circle {
  background-color: transparent;
  box-shadow: 0 0 0 3px #E91E63;
  transform: scale(1) translate3d(0, 0, 0);
}

<div> <!--If you remove this DIV, it works-->
<a href="#" class="circle">Circle</a>
</div>

<div id="circle"></div>

learn about `~`...:https://www.w3schools.com/csSref/css_selectors.asp — לבני מלכה, Jan 07 '19 at 13:39
@לבנימלכה I've been looking at this page - as helpful as it is, none of the selectors seem to work for me... — gromey, Jan 07 '19 at 13:41
In CSS you can only select **forward** and **deeper** into the tree, never upward or backward. — connexo, Jan 07 '19 at 13:42
Ah I see - maybe I can look at Javascript to detect mouseover event on addClass — gromey, Jan 07 '19 at 13:48

score 0 · Answer 1 · answered Jan 07 '19 at 14:28

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 5;
  height: 32px;
  width: 32px;
  background-color: #0081ff;
  pointer-events: none;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
  transform: translate3d(0, 0, 0);
}
  
.circle:hover ~ #circle  {
  background-color: transparent;
  box-shadow: 0 0 0 3px #E91E63;
  transform: scale(1) translate3d(0, 0, 0);
}

<div  class="circle"> <!--If you remove this DIV, it works-->
<a href="#">Circle</a>
</div>

<div id="circle"></div>

Changing a DIV on hover of an anchor link

1 Answers1