把鼠标指针放到某div元素上，其宽度会从50px逐渐变为200px

要实现这个效果，你可以使用JavaScript（具体来说是CSS动画或JavaScript中的mouseover和mouseout事件）来改变一个div元素的宽度。以下是一个简单的示例，它使用纯JavaScript和CSS来完成这个任务。

HTML

<div id="myDiv">Hover over me!</div>

CSS

#myDiv {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 50px; /* 使文本垂直居中 */
  transition: width 0.5s ease; /* 动画效果 */
}

#myDiv.hovered {
  width: 200px;
}

JavaScript

document.getElementById('myDiv').addEventListener('mouseover', function() {
  this.classList.add('hovered');
});

document.getElementById('myDiv').addEventListener('mouseout', function() {
  this.classList.remove('hovered');
});

在这个示例中，当鼠标指针悬停在id为myDiv的div元素上时，JavaScript会向该元素添加一个名为hovered的CSS类。这个类将元素的宽度更改为200px。当鼠标指针离开该元素时，hovered类会被移除，元素宽度会恢复为50px。CSS中的transition属性用于创建宽度变化的动画效果。