CSS: Hovering over child of element should affect different element - html

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]["bezeichnung"]" class="">Bezeichnung</label><input id="txt_link[0]["bezeichnung"]" type="text" maxlength="200" name="link[0]["bezeichnung"]" class="form-control"></div>
</div>
<div class="col-xs-6 mb-0">
<div class="form-group"><label for="txt_link[0]["url"]" class="">URL</label><input id="txt_link[0]["url"]" type="url" maxlength="500" name="link[0]["url"]" 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?

Answer 1

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
}