网页设计鼠标经过背景图片_CSS+DIV实现鼠标经过背景图片变换

1、html 当鼠标经过时,改变它的背景图片

可以设置onMouseOver和onMouseOut事件来实现

2、css效果：鼠标经过行时，背景图片改变

把background 指向图片就可以了嘛

3、html里鼠标滑过文字背景图片改变怎么编写代码啊？

可以用样式中的hover伪类制作。
例子：
a:hover{}
代表鼠标经过的意思。
改变背景图片可以写为：
a{background-image:url(bg1.jpg)}
a:hover{background-image:url(bg2.jpg)}

4、网页中鼠标经过导航条背景图片改变

背景图片，不用文字。
.on {background:url(images/01.png) no-repeat;}
.on:hover {background:url(images/02.png) no-repeat;}

5、CSS鼠标经过DIV换背景图的问题

请问你用的触发事件是onmousemove还是onmouseover,估计是用了onmousemove吧，改成onmouseover就行了

6、Dreamweaver8中如何制作鼠标经过背景图片改变的

http://img.网络.com/img/logo-.gif'"</A> onmouseout="this.src='../pic/login1.gif'">

7、CSS+DIV实现鼠标经过背景图片变换

换这种方式试试：onmouseover="this.style.background-image:1.jpg"

8、如何用CSS样式来实现当鼠标放上去时会出现另一张背景图片呢

做好准备工作，把两张100px X 100px的图片合成 100 X 200 的。通过CSS图片定位来达到切换效果。存放在根目录 img\tupian.gif
<style>
#div_1{width:100px;height:100px;margin:0;padding:0;} 定义一个DIV方框
#div_1 ul,li{list-style:none;margin:0px;padding:0px;} 定义div_1中UL,LI
#div_1 li{float:left;margin:0;}
#div_1 a{
background:url(img/tupian.gif) no-repeat;width:100px;height:100px;display:block;
} 定div_1中链接背景样式等
#a1 a:hover,#a1 a:active{
background-position: 0px -100px;height:100px;
} 定义一个鼠标悬停状态
</style>
在BODY中
<div id="div_1"><ul>
<li><a href="#">首页</a></li>

9、CSS鼠标经过图片变亮,移开变变暗效果代码怎么写

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

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

3、打开浏览器，在浏览器内查看效果：

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

10、CSS中如何让鼠标经过时显示背景图片

通常可以使用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>

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

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

导航:首页 > 万维百科 > 网页设计鼠标经过背景图片

网页设计鼠标经过背景图片

与网页设计鼠标经过背景图片相关的知识