CSS指针经过效果

html-css010

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>

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

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

1、打开hbuilder,在空白的html文件上面设置一个div,给div一个class并命名为img:

2、在css里设置img的类一定的宽和高,引入示例图片,设置图片为不重复。并且给img的类设置“:hover”伪类,设置伪类内的透明度为0.6:

3、打开浏览器,在浏览器内查看效果:

4、将鼠标移入图片,就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮,移开变变暗效果的演示: