HTML中关于鼠标指向改变div显示

利用样式表中 display属性来实现

例如

<html>

<title>aaaaa</title>

<head>

<style>

#changing1
{
 width:980px;
 height:760px;
 left:0px;
 top:50px;
 position:absolute;
 background-image:url(images/xs1.png);
 display:block;}
#changing2
{
 width:980px;
 height:760px;
 left:0px;
 top:50px;
 position:absolute;
 background-image:url(images/xs2.png);
 display:none;}
#changing3
{
 width:980px;
 height:760px;
 left:0px;
 top:50px;
 position:absolute;
 background-image:url(images/xs3.png);
 display:none;}

</style>

</head>

<body>

<div id="changing1"></div>     <!--需要变换的div-->

<div id="changing2"></div>     <!--需要变换的div-->

<div id="changing3"></div>     <!--需要变换的div-->

<div style="height:40px; width=30px; left:100px; top:100px;" onmouseover="change1()">

</div>                      <!--需要指向的div,利用onmouseover即鼠标指向的时候执行change1事件-->

<div style="height:40px; width=30px; left:150px; top:100px;" onmouseover="change2()">

</div>                      <!--需要指向的div,利用onmouseover即鼠标指向的时候执行change2事件-->

<div style="height:40px; width=30px; left:200px; top:100px;" onmouseover="change3()">

</div>                     <!--需要指向的div,利用onmouseover即鼠标指向的时候执行change3事件-->

</body>

<script type="text/javascript">

function change1()
{
 var ch1=document.getElementById("changing1");
 var ch2=document.getElementById("changing2");
 var ch3=document.getElementById("changing3");
 var ch4=document.getElementById("changing4");
 var ch5=document.getElementById("changing5");
 ch1.style.display="block";
 ch2.style.display="none";
 ch3.style.display="none";
 ch4.style.display="none";
 ch5.style.display="none";}
function change2()
{
 var ch1=document.getElementById("changing1");
 var ch2=document.getElementById("changing2");
 var ch3=document.getElementById("changing3");
 var ch4=document.getElementById("changing4");
 var ch5=document.getElementById("changing5");
 ch1.style.display="none"
 ch2.style.display="block"
 ch3.style.display="none"
 ch4.style.display="none"
 ch5.style.display="none"}
function change3()
{
 var ch1=document.getElementById("changing1");
 var ch2=document.getElementById("changing2");
 var ch3=document.getElementById("changing3");
 var ch4=document.getElementById("changing4");
 var ch5=document.getElementById("changing5");
 ch1.style.display="none"
 ch2.style.display="none"
 ch3.style.display="block"
 ch4.style.display="none"
 ch5.style.display="none"}

</script>

</html>

利用这个方法可以实现鼠标指向时改变div的显示  也可以将onmouseover改为onlink 效果就是鼠标点击改变div显示

时间: 2024-10-03 10:37:39

HTML中关于鼠标指向改变div显示的相关文章

jQuery实现鼠标拖动改变Div高度

最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改. 直接上代码 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quo

jquery 鼠标拖动改变div大小

一个非常简单的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

鼠标拖动改变DIV等网页元素的大小的最佳实践

1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change

Winform中ListView鼠标移动使用toolTip显示信息

今天在做一个酒店管理系统的时候用到了ListView,突然想到是否能够当鼠标移动到某一项的时候给出具体房间的信息呢! 首先设置Listview的MouseMove事件 1.获取当前坐标的项 ListViewItem lvi = this.listView.GetItemAt(e.X, e.Y); 2.判断是否有选中的项,如果有即显示对应的信息 if(lvi != null) { toolTip.show("Test",listView,new Point(e.X,e.Y),1000);

超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容

一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ width: 100px; overflow: hidden; /*对超出容器的部分强制截取,高度不确定则换行*/ text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本.*/ white-space: nowrap; /*禁止换行*/ } 三.我们还想显示省略掉的,怎么办

DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此DIV指定3个关键样式{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} 指定样式后,文本超长已经会显示省略号了.如果想鼠标移上去显示全文的话,有2个办法: 一个是把全部文本写在div的title属性里面,还有一个办法是在原

网站开发div在Jquery中的鼠标事件失去焦点

网站div在Jquery中的鼠标事件失去焦点,今天在做网站开发的时候遇到了个问题,就是我在用Jquery做导航的时候,用到了Jquery的鼠标事件mouseout,但问题出来了,我有两个div,A的div包含了B的div,本来我是想当鼠标移出A的div的时候隐藏div,可是当我的鼠标移到B的div在移出的时候也会触发jquery的隐藏事件,这让人很头痛. 在网上搜了下,找到了解决的法子,就是直接把mouseout换成了mouseleave就可以了,具体的问题请大家参考Jquery的开发文档吧

函数传参,改变Div任意属性的值&amp;&amp;图片列表:鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

改变函数中的 this 指向——神奇的call,apply和bind及其应用

在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行详细的讲解,并列出几个经典应用场景. 1.call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一个参数列表,thisArgs 指定了函数在运行期的调用者,也就是函数中的 this 对象,而参数列表会被传入调用函数中.thisArgs 的取值有以下4