CSS：懸停在元素的子元素上應該影響不同的元素

Question

我希望用戶能夠將hover在不同div的button ，然后更改下面div的background-color 。

我目前的代碼如下：

 .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>

將 Hover-CSS 更改為

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

工作，以便當您將鼠標懸停在整個.delSeperator ， .linkField獲得背景屬性。

當我將代碼更改為

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

它的工作原理是，當您將hover在button ， button會獲得background屬性。

但我似乎無法將這兩者結合起來。 有什么方法可以實現我所需要的嗎？

Answer 1

您可以通過使用pointer-events屬性來解決此問題

我讓它與以下 CSS 一起使用：

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

.delSeperator {
  pointer-events: none
}

.delSeperator button {
  pointer-events: initial
}