利用JS控制当鼠标移上去的时候，Div的显示/隐藏

最新推荐文章于 2022-09-03 16:16:56 发布
最新推荐文章于 2022-09-03 16:16:56 发布
阅读量1.4k 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/chaiweiwei/archive/2011/06/30/cww017.html
版权

<html >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
       
function showDiv(divID) {
            if (divID != null && divID != "") {
                var v = document.getElementById(divID);
                if (v.style.display == "none") {
                    v.style.display = "inline";
                }
            }
        }


        function hiddenDiv(divID) {
            if (divID != null && divID != "") {
                var vv = document.getElementById(divID);
                if (vv.style.display == "inline") {
                    vv.style.display = "none";
                }
            }
        }
   
</script>
</head>
<body>
   
<form id="form1" runat="server">
    <div id="div1"  style="width:120px;" οnmοuseοver="showDiv('subDiv1')" οnmοuseοut="hiddenDiv('subDiv1')">
    第一个div
    <div>
    <div id="subDiv1" style="display:none; width:120px;">
    <a href="" >第一个div子类1</a><br />
    <a href="" >第一个div子类2</a>
    </div>
    </div>
    </div>


    <div id="div2" style="width:120px;" οnmοuseοver="showDiv('subDiv2')" οnmοuseοut="hiddenDiv('subDiv2')">
    第二个div
    <div>
    <div id="subDiv2" style="display:none; width:120px;"">
    <a href="" >第二个div子类1</a><br />
    <a href="" >第二个div子类2</a><br />
    <a href="" >第二个div子类3</a>
    </div>
    </div>
    </div>
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/chaiweiwei/archive/2011/06/30/cww017.html

weixin_30287169
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完美的鼠标放上去jquery显示隐藏层
11-04
总的来说，“完美的鼠标放上去jquery显示隐藏层”是一种实用的网页开发技巧，它利用jQuery的强大功能提高了网页的互动性和用户体验。通过学习和实践，开发者可以进一步提升自己的前端技能，并在实际项目中创造出更多...
js-div详细内容跟随鼠标显示
pclook的专栏
10-19 495
<br />CSS：<br /><br /><br /> div.poptip {<br /> position: absolute;<br /> border-bottom: 2px solid #CCC;<br /> border-right: 2px solid #CCC;<br /> padding: 0;<br /> text-align: left;<br /> width: 300px;<br /> opacity: 0.9;<br /> }<br /> di
javascript实现鼠标经过显示隐藏内容
m0_71814235的博客
09-03 4279
javascript实现鼠标经过显示隐藏内容
通过JS实现鼠标放上去显示内容，鼠标离开内容隐藏。
菠萝爱吃草莓的博客
08-29 2692
通过JS实现鼠标放上去显示内容，鼠标离开内容隐藏。
jQuery事件-div的显示隐藏及鼠标的移入移出
weixin_30668887的博客
01-18 611
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse...
js鼠标浮动显示div
07-01
这种技术的核心是利用事件监听器来捕捉鼠标的移动，并根据鼠标的移动来控制div元素的显示与隐藏。在本案例中，"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时，会显示出一个div层，该div层中包含有与...
js鼠标移上去显示大图的代码.rar
06-26
"js鼠标移上去显示大图的代码"涉及到的核心JavaScript知识点包括：DOM操作（如`querySelectorAll`, `addEventListener`）、事件处理（`mouseover`, `mouseout`）、属性访问（`getAttribute`）以及DOM元素的显示隐藏...
jquery鼠标放上去显示悬浮层即弹出定位的div层
12-10
在网页开发中，有时我们需要实现一种交互...当鼠标移到链接上时，对应的悬浮层会显示在鼠标位置，并在鼠标移开时隐藏。这种效果在许多网页中都有应用，如提示信息、下拉菜单等，可以提高用户体验，使信息传递更加直观。
js鼠标移入移出显示与隐藏
m0_61841946的博客
10-24 8961
<body> <divonmouseover="over(this)"onmouseout="out(this)">显示部分</div> <divid="Blk"style="display:none"> <h2>隐藏部分</h2> </div> </body> <script> function over() { //获取div里面名为"Blk"的id鼠标移入时将其显现 va...
jquery和js实现对div的隐藏和显示方法
12-01
jQuery对div的显示和隐藏： 显示： 代码如下: $(“#id”).show() 隐藏： 代码如下: $(“#id”).show() js对div的显示和隐藏： div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 代码如下: style=”visibility: none;” document.getElementById(“typediv1″).style.visibility=”hidden”;//隐藏 document.getElementById(“typediv1″).style.visibility=”visible”;//显示 通过设置d
CSS或者JS实现鼠标悬停显示另一元素
11-30
想达到鼠标悬停到元素a上，显示另一个元素b，可以通过css实现也可以通过js实现。 js: 写两个函数：mouseenter，mouseleave，例如：其中 $("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a").mouseleave(function() { $("#b").hide("normal"); }); css：a元素和b元素需要满足一定的关系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素
js鼠标悬停在a标签显示div,移走鼠标div消失，鼠标悬停在div上时div不消失
秦兽兽的博客
10-12 2万+
把鼠标悬浮在标签a标签上时，出现或隐藏div，当div出现之后，将鼠标移到div上的时候，div不消失鼠标还可以继续操作其他功能的代码如下： &lt;a id="login-btn"&gt;按钮&lt;/a&gt; &lt;div id="login-box" style="display:none;"&gt;默认隐藏的div&lt;/div&gt; &lt;script&
css实现 ： 鼠标移动上去显示div,移开隐藏div
热门推荐
dkvirus
07-11 6万+
一、实现效果：     注：此时鼠标还没移进红色框，红色框内的内容隐藏起来了    注：此时鼠标移到红色框区域内了，内部隐藏的东西显示出来了 二、css控制具体代码： 测试对象转数组 .FontStyle{float:left;} .wrap{float:left;} .wrap{border:1px solid white;width:250px;height
js实现鼠标放在div 悬浮显示另一个div内容链接 （不占位置）
.Z少 的博客
12-10 3400
js实现鼠标放在div 悬浮显示另一个div内容链接 （不占位置） 代码如下 不喜勿喷 简单记录前端小知识 <div> <a id="div1" href="{{##}}" style="display: block;">Tools</a> </div> <div id="aler2" style="display:none;" > <a style="background-color: #00ff74;" href="">
js实现鼠标放入后面内容标签显示，鼠标移出内容标签隐藏
karlif的博客
01-22 2094
昨天犯了个毛病，input显示框显示不全的问题，要求是把鼠标悬停输入框，显示完整的内容（输入框的宽度不能够修改）！ 正常人都会想到用tinput的itle属性，俺当时就脑抽了吧，想着在后面添加一个span框（span），效果就是鼠标放入输入框，input的父级元素加上一个span框，并且取出input 的值，鼠标移出，就把span元素移除（脑子抽了，非常规操作当时想的理所当然）。 话不多说，看看这个好就不曾写的原生js代码。。。。。 html的代码如下 <td style='width:80px;'
js控制div滚动条的显示/隐藏
范天缘的博客
04-25 1199
滚动条显示 document.getElementById("keyCard").style.overflow = "auto"; 滚动条隐藏 document.getElementById("keyCard").style.overflow = "visible";
实现鼠标放到一个div上显示出另一个隐藏的div
Reid的专栏
01-05 5万+
CSS Test Page *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200px; width:100px; } .cs{ width:1
jQ中如何实现鼠标移上去后显示，鼠标移开后隐藏
最新发布
06-10
你可以使用jQuery的`hover()`方法实现鼠标移上去后显示，鼠标移开后隐藏的效果。具体实现方法如下： 1.在HTML中添加需要显示/隐藏的元素，例如： ``` <div class="hover-div"> <p>鼠标移上去显示，移开隐藏</p> </div> ``` 2.在CSS中设置默认隐藏该元素： ``` .hover-div { display: none; } ``` 3.使用jQuery的`hover()`方法来监听鼠标事件，并在回调函数中设置元素的显示/隐藏： ``` $('.hover-div').hover( function () { $(this).show(); }, function () { $(this).hide(); } ); ``` 这样，当鼠标移上去时，元素会显示出来，当鼠标移开时，元素会隐藏起来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值