如果在页面上使用了多个带有边框的元素，每次点击其中一个元素时，都会导致该元素的边框增加。这是由于使用了:hover伪类以及未及时清除其它元素的边框所导致的。

为了解决这个问题，我们可以使用JavaScript来为每个带有边框的元素添加事件侦听器。当鼠标进入元素时，我们可以使用classList方法移除所有其它带有边框的元素的边框样式，并为当前元素添加边框样式。当鼠标移出元素时，我们可以再次使用classList方法移除当前元素的边框样式。以下是示例代码：

HTML代码片段：

Element 1
Element 2
Element 3
Element 4

CSS代码片段：

.border-element {
  border: 1px solid #000;
  padding: 10px;
  margin-bottom: 10px;
}

JavaScript代码片段：

const borderElements = document.querySelectorAll('.border-element');

borderElements.forEach(element => {
  element.addEventListener('mouseover', () => {
    borderElements.forEach(borderElement => {
      if (borderElement !== element) {
        borderElement.classList.remove('active');
      }
    });
    element.classList.add('active');
  });

  element.addEventListener('mouseout', () => {
    element.classList.remove('active');
  });
});

在上述示例中，我们首先使用querySelectorAll方法选择所有带有.border-element类的元素。然后，我们为每个元素都添加了一个事件侦听器，当鼠标进入元素时执行mouseover事件，当鼠标移出元素时执行mouseout事件。在mouseover事件中，我们使用forEach方法遍历每个带有边框的元