我希望用戶能夠hover在button不同的范圍內div，然后改變了background-color的div下方。
我目前的代碼如下：
.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>將 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屬性。
但我似乎無法將這兩者結合起來。有什么方法可以實作我所需要的嗎？
uj5u.com熱心網友回復：
您可以通過使用該pointer-events屬性來解決此問題
我讓它與以下 CSS 一起使用：
.delSeperator:hover .linkField {
background-color: rgba(255,0,0,0.2);
}
.delSeperator {
pointer-events: none
}
.delSeperator button {
pointer-events: initial
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330124.html