CSS指针经过效果

html-css017

CSS指针经过效果,第1张

你好,css指针经过反应的代码如下:

.p:hover{

color:red

font-size:50px

}

<p>鼠标放在这里看看</p>

hover这个代码就是了,你可以试试看的。希望能够帮到你,谢谢。

通常可以使用css样式的 :hover 选择器, 如示例div1。

也可以使用js来控制css样式,用js可以灵活加入其它效果(延迟显示、随机背景图), 如示例div2。

     示例代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.d1{

width: 150px

height: 150px

}

.d1:hover{   /*在这里使用hover 来改变背景图 */

background:url(2531170_142659950000_2.jpg)

}

.d2{

width: 150px

height: 150px

}

</style>

</head>

<body>

<div class="d1">

div1

</div>

<div class="d2" onmouseover="showbg(this)" onmouseout="hidebg(this)"> <!--分别设置了鼠标进入、离开的事件 -->

div2

</div>

</body>

<script>

function showbg(e){

e.style.background="url(2531170_142659950000_2.jpg)" //用javascript来改变背景图片样式

}

function hidebg(e){

e.style.background="none"

}

</script>

</html>

*具体选择根据需要灵活应用

  *注意示例图片要引用正确