使圆形div在悬停时更改颜色

要使圆形div在悬停时更改颜色，可以通过CSS和JavaScript来实现。

首先，需要创建一个圆形div元素，并设置其样式为圆形。可以使用CSS的border-radius属性将div的边框设置为50%来实现圆形效果。

<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

接下来，使用JavaScript来监听div的鼠标悬停事件，并在悬停时更改其颜色。可以使用addEventListener方法来添加鼠标悬停事件的监听器，并在事件处理函数中修改div的背景颜色。

var circle = document.querySelector('.circle');

circle.addEventListener('mouseover', function() {
  circle.style.backgroundColor = 'blue';
});

circle.addEventListener('mouseout', function() {
  circle.style.backgroundColor = 'red';
});

以上代码中，当鼠标悬停在圆形div上时，将其背景颜色更改为蓝色；当鼠标移出时，将其背景颜色恢复为红色。

这样，当用户将鼠标悬停在圆形div上时，其颜色会发生变化。这种效果常用于网页中的交互元素，可以提升用户体验。

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

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr