| 如何实现鼠标移入或移出使元素显示或隐藏 | 您所在的位置：网站首页 › 怎么隐藏图标下面的字 › 如何实现鼠标移入或移出使元素显示或隐藏 |
如何实现鼠标移入或移出使元素显示或隐藏
|
在程序的页面中，页面可能涉及很多方面的功能，可能需要隐藏起来，当鼠标移动到特定的位置时，使其功能显示出来或已经显示的功能的剩下功能显示，当鼠标移出特定位置或区域时，使其隐藏。 例如： 1，某些网站上的购物车，当鼠标移入购物车图标时，他会显示一个框，来提示你的购物车里面已有的商品。 2，在QQ PC版的主页面中，当鼠标移入到我们的头像时，会提示我们的一些基础信息，点击时再跳转到详细信息页面。 这些现象用编程语言来描述的话：鼠标移入元素显示：鼠标移出元素隐藏。 实现这些基础功能可以用： （1）CSS3中的hover伪类属性： （2）javaScript中的鼠标移入事件和鼠标移出事件： （3）jQuery 中的鼠标移入事件和鼠标移出事件： （4）jQuery中的hover（）方法： 目前只会这四种，如有其它请诸位前辈教导。 jQuery 需要引入脚本文件： 移入显示/移出隐藏 你的酒馆对我打了烊 最近 刚好遇见你 一曲相思 心如止水 绿色 我就是一张白纸content已在css样式中隐藏：（dispaly:none;） （1）CSS3中的hover伪类属性： .Moveout:hover #content{ display:block; }提问：使用Css3的hover属性同级元素是否能使用。 我尝试了一下发现，要使用Css3的hover属性是元素显示或隐藏，两个元素需要存在上下级的关系能使用。 而两个不存在上下级关系的同级元素，无法使用Css3的hover属性。 不知是否正确，请诸位前辈教导。 （2）javaScript中的鼠标移入事件和鼠标移出事件： 鼠标移入事件：onmouseover 鼠标移出事件：onmouseout javascript var Moveout = document.getElementById("Moveout"); var content = document.getElementById("content"); //鼠标移入显示 Moveout.onmouseover = function () { content.style.display = "block"; } function Moveoutsover() { content.style.display = "block"; } //鼠标移出隐藏 Moveout.onmouseout = function () { content.style.display = "none"; } function MoveoutSout() { content.style.display = "none"; }onmouseover和onmouseout方法也可以直接在相对应元素上定义其方法的名，但还需写方法体： （3）jQuery 中的鼠标移入事件和鼠标移出事件： 鼠标移入事件：mouseenter 鼠标移出事件：mouseleave 引入jQuery脚本： //jQuery //鼠标移入显示 $("#Moveout").mouseenter(function () { //$("#content").show(); $("#content").css("display", "block"); }) //鼠标移出隐藏 $("#Moveout").mouseleave(function () { //$("#content").hide(); $("#content").css("display", "none"); })jQuery 中使元素显示和隐藏的方法： 显示可以用：show()或 .css(“display”, “block”); 隐藏可以用：hide()或 .css(“display”, “none”); （4）jQuery中的hover（）方法： hover()方法是模仿光标（鼠标）悬停事件。 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 //jQuery的hover $("#Moveout").hover( function(){ $("#content").show(); }, function () { $("#content").hide(); } )javaScript和jQuer的鼠标移入事件和鼠标移出事件及jQuery中的hover（）方法，无需上下级关系： 除了可以实现元素的显示和隐藏，还可以实现很多的功能。 例如：改变元素的样式，元素的背景，字体大小，弹出提示等等， 涉及样式的改变，会涉及css，style的样式关键字。 可能可以实现鼠标移入或移出元素显示或隐藏的方法还有很多，只是我目前只会这四种方法， 如有其它方法，还请诸位前辈教导： |
【本文地址】