鼠标经过或点击内容出现以及其他内容消失的几种方法

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标经过或点击内容出现以及其他内容消失的几种方法相关的知识，希望对你有一定的参考价值。

第一种纯CSS

<div id="menulayer_1"  style="visibility: hidden; padding: 2px 0px 0px 9px;">
    About Us, About Blazing Flames.
</div>
<a href="/class.asp?class_ID=272" onMouseOver="document.all.menulayer_1.style.visibility=‘‘"
   onMouseOut="document.all.menulayer_1.style.visibility=‘hidden‘">關於我們</a>

注意：id的定义要相同


第二种  hide（）show（）

<html><style type="text/css" id="7669030000"></style><head>
<script src="../jquery.js"></script>
<style>
ul{ margin:0; padding:0;}
li{ list-style:none;}
.tab-box{ width:300px;}
.container li{ float:left;line-height:20px; background-color:gray; cursor:pointer; padding:10px;}
.content{ width:300px; heigh:20px; background:#CCCCCC;}
.clearfix{ clear:both;}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

</script>

</body></html>

siblings() 内容出现其他兄弟级隐藏

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

    $(function(){
        $(‘.hd_login_top span‘).click(function(){
            $(this).addClass(‘on‘).siblings().removeClass(‘on‘);
            $(‘.panes>div:eq(‘+$(this).index()+‘)‘).show().siblings().hide();
        })
    })
</script>

<style>

.hd_login_news .hd_login_top span{
    font-size:14px;color:#fff;line-height:40px;cursor:pointer;
    display:inline-block;width:150px;text-align:center;background:#a1a1a0;float:left;}
.hd_login_news .hd_login_top span.on{background:#ff3c3c;}

.hd_login_middle .hd_user input{
    background:url("../images/user.png") no-repeat right center ;background-size:20px;background-position:170px;
    border:1px #ff3c3c solid;height:30px;width:200px;margin:20px  0 10px;text-indent:1em;

}
.hd_login_customer, .hd_login_bottom{width:200px;margin:auto;margin-bottom:10px;}
.hd_login_middle .hd_passerword input{
    background:url("../images/key.png") no-repeat right center ;background-size:20px;background-position:170px;
    border:1px #ff3c3c solid;width:200px;height:30px;margin:10px 0;text-indent:1em;
    }
.hd_login_middle .hd_text input{
    text-indent:1em;background:url("../images/key.png") no-repeat right center ;background-size:20px;background-position:170px;
    border:1px #ff3c3c solid;width:80px;height:30px;margin:10px 0;}
.hd_login_middle .hd_text img{height:40px; float:right;}
</style>
<body>

 <div class="hd_login_top">
     <span class="on">会员登录</span>
     <span>商家登录</span>
 </div>
<div class="panes">
     <div class="hd_login_middle">
         <div class="hd_login_customer">
             <div class="hd_user pane"><input  type="text" placeholder="请输入用户名"></div>
             <div class="hd_passerword pane" ><input type="password" placeholder="请输入密码"></div>
             <div class="hd_text pane"><input type="text" placeholder="验证码" ><img src="images/yanzhengma.jpg"> </div>
         </div>
     </div>
     <div class="hd_login_middle" style="display:none;">
         <div class="hd_login_customer">
             <div class="hd_user"><input  type="text" placeholder="请输入"></div>
             <div class="hd_passerword" ><input type="password" placeholder="请输入密码"></div>
             <div class="hd_text"><input type="text" placeholder="验证码" ><img src="images/yanzhengma.jpg"> </div>
         </div>
     </div>
 </div>

</body>

以上是关于鼠标经过或点击内容出现以及其他内容消失的几种方法的主要内容，如果未能解决你的问题，请参考以下文章

selenium 怎么查找定位鼠标移上去显示，移开鼠标就消失的内容

如何实现鼠标经过弹出窗口，鼠标离开后窗口消失？ PS:重点是弹窗里面的内容还可以设置链接

调整框架（窗口）大小后组件消失

高并发架构以及处理的几种方式

HTML如何实现鼠标经过切换标签效果？HTML边框问题，请高手赐教，万分感谢！

鼠标经过 或点击 内容出现 以及其他内容消失的几种方法

鼠标经过或点击内容出现以及其他内容消失的几种方法