代码之家 › 专栏 › 技术社区 › cheesydoritosandkale

动态更改第n个子编号

css javascript

cheesydoritosandkale · 技术社区 · 8 年前

 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;
  }

这是我的长选择器。我试图突出显示整个列的基础上,用户悬停在一个项目上的一列。这是伟大的作品,除了它只突出了任何第n个孩子,我用在最后一个 datatable-body-cell:nth-child(1) 我可以把它改成任何数字,它可以工作,但它不是动态的。我希望它只选择悬停在上面的列。我试过了 datatable-body-cell:nth-child(n):hover 和 datatable-body-cell:hover 还有很多不同的种类,但它要么突出整个表,要么什么都没有,除非我指定第n个孩子。

1 回复 | 直到 8 年前

Unmitigated 8 年前

你可以用 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前