鼠标滑过上浮代码(鼠标滑过上浮代码怎么回事)
admin 发布:2022-12-19 07:23 94
本篇文章给大家谈谈鼠标滑过上浮代码,以及鼠标滑过上浮代码怎么回事对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、CSS鼠标滑过内容切换的代码
- 2、求助,怎么做鼠标经过图片上浮的特效,求大神或javascript代码,感激涕零!
- 3、html鼠标悬浮在按钮上,让按钮背景变色
- 4、关于FLASH鼠标滑过代码 急!
- 5、求 js 特效,鼠标滑过,显示浮层
- 6、怎么写鼠标滑过按钮是一个深绿色图片按钮 一处是一个样的浅色图片按钮代码
CSS鼠标滑过内容切换的代码
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE/TITLE
META NAME="Generator" CONTENT="EditPlus"
META NAME="Author" CONTENT=""
META NAME="Keywords" CONTENT=""
META NAME="Description" CONTENT=""
/HEAD
style
/*为什么要这样定义样式,而不用#cardBar ul 这样定义,我个人的猜测是因为类是就近原则获取样式,而#cardBar ul则不是就近原则,按标签来定义,因此.Selected样式就无法出现。*/
*{
margin:0px;
padding:0px;
text-decoration:none;
}
/*定义基本样式*/
ul.cardUl{
font-size:12px;
list-style-type:none;
text-align:center;
height:29px;
background-image:url(attachments/month_0706/2200764172315.gif);
}
/*默认样式下使用css文件*/
ul.cardUl li{
height:29px;
background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
float:left;
margin-right:1px;
padding-left:6px; /*另一边提供空间*/
}
ul.cardUl li a{
float:left;
height:29px;
background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
display:block;
padding:8px 8px 3px 4px;/*让文字能够够居中*/
color:#333;
white-space: nowrap;
}
/*文字点击使用CSS*/
ul.cardUl li.Selected{
background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
}
ul.cardUl li.Selected a{
background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
}
/*对点击下栏显示边框的代码进行美化*/
div.hackBox{
padding:2px 2px;
border-left:2px solid #6697CD;
border-right:2px solid #6697CD;
border-bottom:2px solid #6697CD;
display:none;
}
/style
script
//为选项卡的默认值进行设定,方法为读取cardBar里面的li标签是否已经有selected属性,如果没有则使用默认值。
function loadTab(){
//读取cardBar下面所有li标签
var getId=document.getElementById("cardBar").getElementsByTagName("li");
//定义一个判断是否有selected的变量
var selectedItems=0;
//判断方法,循环读出li标签的className,如果有则selectedItems加1
for(i=0;igetId.length;i++){
if (getId[i].className == "Selected"){
selectedItems+=1;
}
}
//经过循环,如果selectedItems没有数值,那么说明没有selected的标签,因此给标签加上默认的className
if (selectedItems==0){
document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
document.getElementById("Dcard1").style.display="block";
}
}
//让窗口打开就运行他
window.onload=loadTab;
//设定结束
//进行选项卡效果的触发
function switchTab(cardBar,cardId){
//读取cardBar下面所有li标签
var oItems = document.getElementById(cardBar).getElementsByTagName("li");
//循环清空li标签下面的selected效果
for (i=0;ioItems.length;i++ ){
var x=oItems[i];
x.className="";
var y=x.getElementsByTagName("a");
y[0].style.color="#333";
}
//开始选项卡效果的赋值,为选中的li标签增加selected类的属性
document.getElementById(cardId).className="Selected";
//读出cardContent 下面的所有div标签
var dvs=document.getElementById("cardContent").getElementsByTagName("div");
//循环,判断应该显示的div
for (i=0;idvs.length;i++ ){
if (dvs[i].id==("D"+cardId)){
dvs[i].style.display="block";
}else{
dvs[i].style.display="none";
}
}
}
/script
BODY
div id="aa"
ul class="cardUl" id="cardBar"
li id="card1"a href="#" onclick="javascript:switchTab('cardBar','card1');"第一选项/a/li
li id="card2"a href="#" onclick="javascript:switchTab('cardBar','card2');"第二选项/a/li
li id="card3"a href="#" onclick="javascript:switchTab('cardBar','card3');"第三选项/a/li
li id="card4"a href="#" onclick="javascript:switchTab('cardBar','card4');"第四选项/a/li
/ul
div id="cardContent"
div id="Dcard1" class="hackBox"代码一/div
div id="Dcard2" class="hackBox""代码二/div
div id="Dcard3" class="hackBox"代码三/div
div id="Dcard4" class="hackBox"代码四/div
/div
/div
/BODY
/HTML
求助,怎么做鼠标经过图片上浮的特效,求大神或javascript代码,感激涕零!
/*如果用JS,事件是onmouseover*/
对象.onmouover = function(){
// 这里修改下图片的位置就可以了。
//但是css必须要有position定位才行。
}
/*CSS也可以办到,用:hover */
ul{list-style:none;}
li{background:#FC9;width:100px;height:30px;float:left;text-align:center;position:relative;}
li:hover{background:#CCC;left:-2px;top:-5px;color:#FFF;text-align:center; cursor:pointer}
li:active{font-weight:bold;background:#666;}
/style
ul
li选项一/li
li选项二/li
li选项三/li
li返回/li
/ul
html鼠标悬浮在按钮上,让按钮背景变色
1、首先创建一个新的html文件,如图所示。
2、在html文件上找到body标签,在这个标签里创建一个div标签并设置class类为bg ,如图所示。
3、接着在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。
4、然后设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过:hover,然后设置鼠标滑过时的背景颜色。
5、最后实用浏览器打开,保存好html后使用浏览器打开,在鼠标没有滑过div时背景是红色的,当鼠标滑过div的时候背景从红色变为了棕色。
关于FLASH鼠标滑过代码 急!
两种方法.
把这个城市做成按钮,按钮滑过那一帧加上文字.按下那一帧没有文字.
另一种方法.城市做成按钮.
文字做成MC.把文字拖到舞台,起个实例名,比如mytext.MC透明度为0%.
在按钮上写:
on(rollOver)
{
_root.mytext._alpha=100;
}
on(rollOut)
{
_root.mytext._alpha=0;
}
求 js 特效,鼠标滑过,显示浮层
首先随便找一个地方新建一个div 并且隐藏。例如
div id='showTip' style="background-color: white; width:200px; height:200px;position: absolute; display: none; "
/div
然后在链接那边写个onmouseover 属性加个触发方法 如showDiv()具体方法如下
function showDiv(e){
$("#showTip").html("这里可以写一些html的内容,如图片文字");
$("#showTip").css("top",e.clientY);//这里可以根据情况适当调整
$("#showTip").css("left",e.clientX);
$("#showTip").show();
}
还要在链接那边加上 onmouseout属性触发方法如下:
function hideDiv(){
$("#showTip").hide();
}
以上需要引入jquery支持
怎么写鼠标滑过按钮是一个深绿色图片按钮 一处是一个样的浅色图片按钮代码
代码很简单说个思路,鼠标滑过onMouseOver, 你在这个按钮里面添加 鼠标滑过事件
鼠标离开事件onMouseOut
input id="btn" onMouseOver="fun1()" onMouseOut=“fun2()” /
在去写js方法 fun1() fun2()
function fun1(){
document.getElement.ById("btn").style.background=" //设置你要的图标";
}
fun2() 和fun1() 类似,只是图片不一样罢了,具体的 看你修改的图片地址罢了
鼠标滑过上浮代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于鼠标滑过上浮代码怎么回事、鼠标滑过上浮代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-08营销软件网站,营销软件网的软件怎么用
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
- 05-06在线html执行代码(html怎么运行)[20240506更新]
- 05-06源代码管理资源管理器(资源管理器运行代码)[20240506更新]
- 05-06代码源软件库(程序代码库)[20240506更新]
- 05-06点击弹出密码代码(点击弹出密码代码错误)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接