css里鼠标悬停变色怎么设置?

html-css024

css里鼠标悬停变色怎么设置?,第1张

css中悬停改变样式的最好方法是用伪类选择器div:hover{}。css代码示例如下:\x0d\x0a\x0d\x0adiv{width:100pxheight:200pxbackground:#000}\x0d\x0adiv:hover{background:#fff}\x0d\x0a\x0d\x0a这是一个修改背景颜色的示例,伪类里可以修改跟多的样式,宽度,高度或者字体大小,字体颜色都是可以修改的。

我想到的是 transition:color 0 ease-in  1s

最后一个时间是延迟,使用时注意加上备浏览器前缀。

<!DOCTYPE html>

<html>

<head>

<style> 

div

{

width:100px

height:100px

color: blue

transition:all 0 ease-in  1s

}

div:hover

{

color: red

}

</style>

</head>

<body>

<div>test</div>

<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>