Question

 ngx-datatable > div > datatable-body > datatable-selection:hover > datatable-scroller > datatable-row-wrapper:nth-child(n) > datatable-body-row > div.datatable-row-center.datatable-row-group > datatable-body-cell:nth-child(1) {
    background-color: #E9F1FA !important;
  }

这是我的长选择器。我试图根据用户将鼠标悬停在列上的某个项目上来突出显示整个列。这很有效，除了它仅突出显示我在上一个datatable-body-cell:nth-child(1)上使用的第n个孩子之外，我可以将其更改为任意数字并且可以工作，但是它不是动态的。我希望它仅选择要悬停的列。我已经尝试过datatable-body-cell:nth-child(n):hover和datatable-body-cell:hover以及许多不同的品种，但是除非我指定了第n个孩子，否则它要么突出显示整个表格，要么不显示任何内容。有没有一种方法可以根据用户将鼠标悬停在哪个子代上（使用CSS或Javascript）动态更改第n个子代？任何帮助将不胜感激！

Answer 1

您可以使用document.querySelector来获取该列并设置其样式，将其悬停在mouseenter上，然后在mouseleave上将其重置为正常。

var n = 1;//the number
document.querySelector('ngx-datatable > div > datatable-body > datatable-selection:hover > datatable-scroller > datatable-row-wrapper:nth-child('+n+') > datatable-body-row > div.datatable-row-center.datatable-row-group > datatable-body-cell:nth-child(1)').style.setProperty('background-color', '#E9F1FA', 'important');

演示：

var children = document.querySelectorAll('div.child');
Array.prototype.slice.call(children).forEach(function(child){
var n = child.parentNode.getAttribute('data-num');
var parent = document.querySelector('div.table>div:nth-child('+n+')');
  child.addEventListener('mouseenter', function(e){
    parent.style.backgroundColor = "yellow";
    this.style.backgroundColor = "red";
  });
    child.addEventListener('mouseleave', function(e){
    var n = +this.parentNode.getAttribute('data-num');
    parent.style.backgroundColor = "";
    this.style.backgroundColor = "";
  });
});

.table{
 height: 250px;
  width: 400px;
  margin: 5px;
  padding: 5px;
  background-color: goldenrod;
}
.column{
  background-color: dodgerblue;
  margin: 5px;
}
.child{
  border: 1px solid black;
}

<div class="table">
<div class="column" data-num="1">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<div class="column" data-num="2">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<div class="column" data-num="3">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</div>

动态更改第n个子编号

1 个答案: