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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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
}