Question

我有多个父DIV个元素，每个元素都有一个子SPAN。 CLASS的{{1}}会动态更改。

我已添加SPAN以在悬停时应用某些样式，但如果其子.parent:hover具有特定SPAN

示例代码：

CLASS

我可以通过动态添加类的迂回解决方案来做到这一点只要子类更改为.parent { cursor: pointer; } .parent:hover { box-shadow: 0px 0px 9px #888888 inset; } .parent:hover .childActive { /* code that applies style to the child upon hover over the parent */ } /* need code that applies style to the parent upon hover, if childActive */
，就转到父级

是否可以在纯CSS中执行此操作？

Answer 1

我绝对建议简单地将该类添加到父级，但这里是一个Javascript替代方案。

使用Javascript（ES5）：

1：创建两个函数，在光标悬停并离开＆＃34; parent＆＃34;时调用。 div（在事件监听器中触发）。

此功能添加了类＆＃34;活动＆＃34;到了父母＆＃34;格。

function parentHover(parent){
    if(parent.children[0].classList.contains('childActive')){
        parent.classList.add('active');
    }
}

此功能删除了类＆＃34;活动＆＃34;来自＆＃34;父母＆＃34;格。

function parentLeave(parent){
  parent.classList.remove('active');
}

2：为悬停和离开父div时创建两个事件侦听器，并传递在步骤1中创建的函数。

var parentArray = document.getElementsByClassName('active');

parentArray.forEach(function(parent){
    parent.addEventListener('mouseover', parentHover(parent));
    parent.addEventListener('mouseout', parentLeave(parent));
}

3：为课程添加样式＆＃34;有效＆＃34;当与班级＆＃34;父母＆＃34;

配对时

.parent.active{
  //certain styles
}

CSS - 如果孩子属于特定班级，则在悬停时更改父母的风格

1 个答案:

我绝对建议简单地将该类添加到父级，但这里是一个Javascript替代方案。