悬停时使用css或javascript在div周围显示多种颜色

悬停时使用CSS或JavaScript在div周围显示多种颜色，可以通过CSS的:hover伪类和JavaScript的事件监听来实现。

1. 使用CSS实现： 在HTML中，给目标div添加一个类名或id，例如：

<div class="hover-div">...</div>

然后在CSS中定义该类名或id的样式，并使用:hover伪类来设置悬停时的样式，包括背景颜色、边框颜色等：

.hover-div {
  /* 初始样式 */
}

.hover-div:hover {
  /* 悬停时的样式 */
  background-color: red;
  border: 2px solid blue;
}

这样，当鼠标悬停在该div上时，会显示红色背景和蓝色边框。

1. 使用JavaScript实现： 在HTML中，给目标div添加一个类名或id，例如：

<div class="hover-div">...</div>

然后在JavaScript中使用事件监听，监听鼠标悬停事件，并在事件触发时修改div的样式：

const hoverDiv = document.querySelector('.hover-div');

hoverDiv.addEventListener('mouseover', function() {
  // 悬停时的样式
  hoverDiv.style.backgroundColor = 'red';
  hoverDiv.style.border = '2px solid blue';
});

hoverDiv.addEventListener('mouseout', function() {
  // 恢复初始样式
  hoverDiv.style.backgroundColor = '';
  hoverDiv.style.border = '';
});

这样，当鼠标悬停在该div上时，会通过JavaScript动态修改div的样式，实现多种颜色的显示。

这种效果在网页设计中常用于提升用户交互体验，可以用于按钮、链接等元素的悬停效果，吸引用户的注意力。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
• 腾讯云人工智能：https://cloud.tencent.com/product/ai
• 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发：https://cloud.tencent.com/product/mobile
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
• 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc