CSS: Hovering over child of element should affect different element

Question

I want users to be able to hover over a button within a different div, which then changed the background-color of the div below.

My current code is as followed:

.delSeperator button:hover+.linkField {
  background-color: rgba(255, 0, 0, 0.2);
}

.seperator {
  color: #000000;
  background-color: #e4e8eb;
  min-height: 0.5rem;
  margin: 1rem 0rem 1rem 0rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="delSeperator_0" class="row delSeperator">
  <div class="col-xs-10 mb-0">
    <div class='seperator vertical-center'></div>
  </div>
  <div class="col-xs-1 mb-0"><button type="button" class="btn btn-danger" onclick="delField('linkField', this.closest('.row')); delField('delSeperator', this.closest('.row'));"><i class="fa fa-minus" aria-hidden="true"></i></button></div>
</div>

<div class="row linkField" id="linkField_0">
  <div class="col-xs-6 mb-0">
    <div class="form-group"><label for="txt_link[0][&quot;bezeichnung&quot;]" class="">Bezeichnung</label><input id="txt_link[0][&quot;bezeichnung&quot;]" type="text" maxlength="200" name="link[0][&quot;bezeichnung&quot;]" class="form-control"></div>
  </div>
  <div class="col-xs-6 mb-0">
    <div class="form-group"><label for="txt_link[0][&quot;url&quot;]" class="">URL</label><input id="txt_link[0][&quot;url&quot;]" type="url" maxlength="500" name="link[0][&quot;url&quot;]" class="form-control"></div>
  </div>
</div>

Changing the Hover-CSS to

.delSeperator:hover + .linkField {
    background-color: rgba(255,0,0,0.2);
}

works so that when you hover over the whole .delSeperator, the .linkField gets the background property.

When I change the code to

.delSeperator button:hover {
    background-color: rgba(255,0,0,0.2);
}

it works so that when you hover over the button, the button gets the background property.

But I can't seem to combine these two. Is there any way to achieve what I need?

Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — SecretTimes, Oct 21 '21 at 13:28
@SecretTimes Unfortunately no, since as you can see I already tried the answer on the link provided and it didn't work. — alex, Oct 21 '21 at 13:36

score 0 · Accepted Answer · answered Oct 21 '21 at 13:29

You can workaround this issue by playing with the pointer-events property

i got this to work with the following CSS:

.delSeperator:hover + .linkField {
background-color: rgba(255,0,0,0.2);
}

.delSeperator {
  pointer-events: none
}

.delSeperator button {
  pointer-events: initial
}

CSS: Hovering over child of element should affect different element

1 Answers1