导航:首页 > 万维百科 > 网页设计滚动鼠标悬停

网页设计滚动鼠标悬停

发布时间:2020-12-15 19:51:52

1、制作一个包含一个按钮的页面,当鼠标悬停(onMouseOver)在按钮上时(JavaScript的使用)

<!doctype html>
<html>
  <head>
  <meta charset="utf-8"/>
  <title></title>
  <style type="text/css">

  </style>
  <script>
  function f1(){
   document.body.style.background="red";
  };
  function f2(){
   document.body.style.background = "#fff";
  };
  </script>
  </head>
  <body>
   <button onMouseOver="f1()" onMouseOut="f2()" >鼠标悬停版事件权</button>
  </body>


</html>

2、如何制作正反都有的图片 就是那种网页上鼠标悬停会翻转的图片

首先用像素好一点的手机把你的证件照正面反面都照一张,要清晰哦;

展开长图
2/10
用QQ上的“我的设备”把你的照片传到你的电脑上;

3/10
把它们另存到桌面上来;

查看剩余1张图
4/10
在你的电脑上下载一个美图秀秀;

5/10
打开美图秀秀,找到拼图;

6/10
选择我们放在桌面上的图片;

7/10
这样拼起来不正确怎么办,点击版式;

8/10
找到上下均等的版式;

9/10
点击图片,为图片调整位置

查看剩余1张图
10/10
为图片调整好位置,保存到电脑上就好了。

3、网站设计css如何鼠标悬停覆盖另一张图片

<div class="div">
<div class="img1 img">
    <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy//pic/item/.jpg">
</div>
<div class="img2 img">
    <img src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy//pic/item/.jpg">
</div>
</div>
<style>
.div{position:relative; width:800px; margin:auto;}
.img{position:absolute; z-index:0;}
.img2{left:150px; top:100px;}
.img1:hover{z-index:1;}
</style>

利用hover伪类就可以实现,自己再稍微修改下就可以了,解决请采纳

4、在网页制作中,怎么把图片应用为动态HTML效果?当鼠标悬停时图片1换成图片2,要怎么设置?

Dreamweaver中可以自动设置的
工具栏中 “插入”-“图片对象”-“鼠标经过图片”
如果是用内CSS实现的话,可以在容需要设置动态效果的标签中使用伪类:hover
具体怎么用,就看你对CSS的掌握程度了。
PS:该方法不适用于IE6,其他的可以。
再有就是用JavaScript来实现了。
对于初学者的话,直接用Dreamweaver来实现比较容易。
后面两种方法涉及到的东西比较多。

5、网页设计中,怎么才能让鼠标悬浮在图标上面时,出特效文字说明?

用DREAMWEAVER时 点图标 下面有属性 在替换里面输入内容 就可以 这个替换就是 alt标签
TITLE也可以给图片加说明 性能上没有ALT好 以前有些浏览器是不支持图片加TITLE属性的 给文字或者链接文字加说明用title标签

不明白的再问我。。

6、网页制作:如何实现鼠标悬停时FLASH开始播放

你在Flash里做一个透明抄的按钮,(也就是按钮的前三祯都是空的,第四祯做一个与Flash文件同样大的图形做为映射感应区域)

然后,在按钮上添加

on (rollOver) {
getURL("你的网址", "_blank");
}

rollOver表示鼠标滑过

7、网页制作 这样使当鼠标悬停时改变背景图?

css方法:
html:
<img src="../img/1.jpg"/>
css:
img :hover{
background:url(../img/2.jpg);
}

8、如何在html网页里面制作鼠标悬浮时字体有阴影的效果?

建议LZ将文字加工成图片的形式,一种正常,一种带阴影效果..将这两张图片分别做成鼠标经过图片就可以了..如果你明白CSS的话,也可以用CSS来对鼠标经过状态进行定义..如果不明白 直接在DW中执行 插入---图像对象---鼠标经过图像..在弹出的对话框中设置鼠标经过状态的两种状态分别显示的图片就可以了!

9、dw制作的网页在鼠标悬停事件触发不同内容

你写的比较乱,你就是想做一个选项卡是吗

.tab{font-size:12px;}
.tab ul , .tab ul li{margin:0;padding:0;}
.tab ul{diplay:block;height:31px;}
.tab ul li{float:left;list-style:none;width:50px;height:30px;text-align:center;line-height:30px;border:1px solid #999;margin:0 3px;border-bottom:none;cursor:pointer;}
.tab ul .hover{border-top:2px solid #f00;}
.content{border:1px solid #009;}

<div class='tab'>
<ul>
<li class="hover">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div class="content" id="content">
<div>
<p>275万购昌平邻铁三居 总价万买一居</p>
<p>200万内购五环三居 140万安家东三环</p>
</div>
<div style='display:none;'>
<p>北京首现零首付楼盘 53万购东5环50平</p>
<p>200万内购五环三居 140万安家东三环</p>
</div>
<div style='display:none;'>
<p>京楼盘直降5000 中信府 公园楼王现房</p>
<p>200万内购五环三居 140万安家东三环</p>
</div>
</div>
</div>

<script type="text/javascript">
var li = document.getElementsByTagName('li');
var div = document.getElementById('content').getElementsByTagName('div');
for(var i=0;i<li.length;i++){
li[i].atr=i;
li[i].onmouseover=function(){
//清除所有高亮和所有内容隐藏
for(var j=0;j<li.length;j++){
li[j].className='';
div[j].style.display='none';
}
//当前高亮显示
li[this.atr].className='hover';
//当前内容显示
div[this.atr].style.display='block';
}
}
</script>

10、关于网页制作中悬浮窗在鼠标在上面时停止的问题

<html>
<head>
<title>移动文字</title>
</head>
<body>
<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 direction=up>
文字从下向上移动,改成direction=left则左右向左移动 scrollamount=1 为速度,数字越大越慢
</MARQUEE>
</body>
</html>

与网页设计滚动鼠标悬停相关的知识