同时显示两个或更多小工具的悬停效果？

<div id="container">
  <div id="tool1">小工具1</div>
  <div id="tool2">小工具2</div>
</div>

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#tool1, #tool2 {
  display: none;
  width: 200px;
  height: 100px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}

#container:hover #tool1 {
  display: block;
}

#container:hover #tool2 {
  display: block;
}

var container = document.getElementById('container');
var tool1 = document.getElementById('tool1');
var tool2 = document.getElementById('tool2');

container.addEventListener('mouseover', function() {
  tool1.style.display = 'block';
  tool2.style.display = 'block';
});

container.addEventListener('mouseout', function() {
  tool1.style.display = 'none';
  tool2.style.display = 'none';
});