:hover to change other element, but it triggers from the target as well

Question

I have a problem. I have made a targeted hover with .trigger:hover .target {} .. my problem though is that it triggers from the .target as well..

.trigger {
  width: 300px;
  height: 300px;
  background: #444;
  position: relative;
}

.target {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  transform: translate3d(100%, 0, 0);
}

.trigger:hover .target {
  border-radius: 50%;
}

<div class="trigger">
  <div class="target"></div>
</div>

Example: https://jsfiddle.net/Ls4ejw60/

how does one prevent this? .. i have seen it being done with this method of .trigger:hover .target {}, but i haven't figured out how to prevent it from triggering off the target.

Answer 1

You can use pointer-events: none; on the .target:

.trigger {
  width: 300px;
  height: 300px;
  background: #444;
  position: relative;
}

.target {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
}

.trigger:hover .target {
  border-radius: 50%;
}

<div class="trigger">
  <div class="target"></div>
</div>

Another option is to move it out of the .trigger, and use the adjacent sibling combinator (+), but then you'll have to define it's size explicitly, and position it beside the trigger in another way (I've used display: flex; on the body):

body {
  display: flex;
}

.trigger, .target {
  width: 300px;
  height: 300px;
}

.trigger {
  background: #444;
  position: relative;
}

.target {
  background: #111;
}

.trigger:hover + .target {
  border-radius: 50%;
}

<div class="trigger"></div>
<div class="target"></div>