html鼠标悬停改变指针,把鼠标指针悬停在 div 元素上，它的外观会逐渐改变

蜜蜂教程(mifengjc.com)

#myDIV {

border: 1px solid black;

background-color: lightblue;

width: 270px;

height: 200px;

overflow: auto;

}

#myDIV:hover {

background-color: coral;

width: 570px;

height: 500px;

padding: 100px;

border-radius: 50px;

}

把鼠标指针悬停在 DIV 元素上，它将改变颜色和尺寸大小！

点击“尝试一下”按钮，再次把鼠标指针悬停在 DIV 元素上。改变将逐渐进行，就像一个动画：

尝试一下

myDIV

function myFunction() {

document.getElementById("myDIV").style.transition = "all 2s";

document.getElementById("myDIV").style.WebkitTransition = "all 2s";

}

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持另一个可替代该属性的属性，即 WebkitTransition 属性。