使用Javascript在悬停时转换子元素

Question

我试图在父div悬停时有一个切换类的图标。 到目前为止，这是我的代码：

var actionIcon = document.querySelector(".task > svg")
var taskContainer = document.querySelector(".task")

function iconScale() {
  actionIcon.classList.toggle('big');
}

taskContainer.onmouseenter = iconScale
taskContainer.onmouseleave = iconScale

和HTML：

<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    <path d="..." />
  </svg>
</div>

我的问题是，我试图实现的效果仅发生在第一个父元素上，而其他元素都没有。 我很确定我没有指定什么，但是我不知道什么。有人可以给我提示吗？

Answer 1

固定的代码映射到作为任务的所有div。无法使用querySelector，因为它只会返回第一个实例。

const actionIcon = (parent) => {
  return parent.querySelector('svg');
};

document.addEventListener('DOMContentLoaded', function() {

  // Add events to ALL divs that conform
  let tasks = document.getElementsByClassName('task');
  
  for(let t of tasks) {
    t.onmouseenter = iconScale;
    t.onmouseleave = iconScale;
  }

  function iconScale(event) {
    let icon = actionIcon(event.target);
    icon.classList.toggle('big');
  }
});

svg {
  height: 50px;
  width: 50px;
  background-color: red;
} 

.big {
  background-color: blue;
}

<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>
<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>
<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>
<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>

Answer 2

您要求使用JavaScript，但是作为另一个更简单的示例，您甚至不需要使用JavaScript。您想要的完全可以在CSS中完成：

svg {
  height: 50px;
  width: 50px;
  background-color: red;
}

.task:hover svg {
  background-color: blue;
}

<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>
<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>
<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>
<div class="task">
  <h3>Title</h3>
  <svg viewBox="0 0 24 24">
    
  </svg>
</div>