CSS+JS实现按钮水平排列、鼠标悬停变色和分割线效果

{/'title/':/'div块里有许多按钮，从左到右依次展示这些按钮，但是向右靠，且按钮之间有一条不接触到div块上下的边缘的细线分割，当鼠标移动到按钮上方时，按钮变色，反之亦然/',/'description/':/'使用HTML、CSS和JavaScript实现按钮水平排列，鼠标悬停时按钮变色，按钮之间用细线分割的效果，并且分割线不会接触到div块的边缘。/',/'keywords/':/'按钮, 水平排列, 鼠标悬停, 变色, 分割线, CSS, JavaScript, HTML, 代码示例/',/'content/':/'要实现这个效果，可以使用HTML和CSS来创建按钮和分割线，并使用JavaScript来监听鼠标移动事件来控制按钮的颜色变化。//n//n首先，创建一个包含按钮的div块，并给它一个唯一的id，例如：//n//nhtml//n<div id=/'button-container/'>//n <button class=/'button/'>按钮1</button>//n <button class=/'button/'>按钮2</button>//n <button class=/'button/'>按钮3</button>//n <button class=/'button/'>按钮4</button>//n <button class=/'button/'>按钮5</button>//n</div>//n//n//n然后，使用CSS样式来设置按钮和分割线的样式：//n//ncss//n.button {//n display: inline-block;//n padding: 10px;//n background-color: #ccc;//n border: none;//n margin-right: 5px;//n}//n//n.button:hover {//n background-color: #999;//n}//n//n.separator {//n display: inline-block;//n width: 1px;//n height: 100%;//n background-color: #999;//n margin-right: 5px;//n}//n//n//n接下来，使用JavaScript来监听鼠标移动事件，并根据鼠标位置来改变按钮的颜色：//n//njavascript//nvar buttons = document.getElementsByClassName('button');//n//nfor (var i = 0; i < buttons.length; i++) {//n buttons[i].addEventListener('mouseenter', function() {//n this.style.backgroundColor = '#999';//n });//n //n buttons[i].addEventListener('mouseleave', function() {//n this.style.backgroundColor = '#ccc';//n });//n}//n//n//n最后，为按钮之间添加分割线。在按钮之间插入一个span元素，并给它一个class为/'separator/'：//n//njavascript//nvar buttonContainer = document.getElementById('button-container');//nvar buttons = buttonContainer.getElementsByClassName('button');//n//nfor (var i = 0; i < buttons.length - 1; i++) {//n var separator = document.createElement('span');//n separator.className = 'separator';//n buttonContainer.insertBefore(separator, buttons[i + 1]);//n}//n//n//n以上代码会在按钮之间添加一个宽为1像素，高为div块高度的分割线。//n//n现在，当鼠标移动到按钮上方时，按钮会变色，当鼠标离开按钮时，按钮会恢复原色，并且按钮之间会有一条分割线分隔。/