div块里有许多按钮从左到右依次展示这些按钮但是向右靠且按钮之间有一条不接触到div块上下的边缘的细线分割当鼠标移动到按钮上方时按钮变色反之亦然

要实现这个效果，可以使用HTML和CSS来创建按钮和分割线，并使用JavaScript来监听鼠标移动事件来控制按钮的颜色变化。

首先，创建一个包含按钮的div块，并给它一个唯一的id，例如：

<div id="button-container">
  <button class="button">按钮1</button>
  <button class="button">按钮2</button>
  <button class="button">按钮3</button>
  <button class="button">按钮4</button>
  <button class="button">按钮5</button>
</div>

然后，使用CSS样式来设置按钮和分割线的样式：

.button {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  border: none;
  margin-right: 5px;
}

.button:hover {
  background-color: #999;
}

.separator {
  display: inline-block;
  width: 1px;
  height: 100%;
  background-color: #999;
  margin-right: 5px;
}

接下来，使用JavaScript来监听鼠标移动事件，并根据鼠标位置来改变按钮的颜色：

var buttons = document.getElementsByClassName('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('mouseenter', function() {
    this.style.backgroundColor = '#999';
  });
  
  buttons[i].addEventListener('mouseleave', function() {
    this.style.backgroundColor = '#ccc';
  });
}

最后，为按钮之间添加分割线。在按钮之间插入一个span元素，并给它一个class为"separator"：

var buttonContainer = document.getElementById('button-container');
var buttons = buttonContainer.getElementsByClassName('button');

for (var i = 0; i < buttons.length - 1; i++) {
  var separator = document.createElement('span');
  separator.className = 'separator';
  buttonContainer.insertBefore(separator, buttons[i + 1]);
}

以上代码会在按钮之间添加一个宽为1像素，高为div块高度的分割线。

现在，当鼠标移动到按钮上方时，按钮会变色，当鼠标离开按钮时，按钮会恢复原色，并且按钮之间会有一条分割线分隔