CSS：悬停在元素的子元素上应该影响不同的元素

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?

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
}