51健康上高端健康管理服务流程


注册会员
                
食疗处方 + 运动处方 + 生活处方 + 经络处方 + 穴位处方 + 心疗辅导  

                            1            2              3        4         5        

                             登录              → 健康测试  →  体质评估    → 话聊  →   话疗  →  健康陪聊     → 陪疗                                    

              ↓       2             3                    5              6  
                +  →     中医问诊  +   生活习评估  +   全科汇诊  + 心理评估

  接受地面直接预约服务                                     点击框内名字自动跳到相应注解  “会员级别星标



a标签鼠标放上去加背景色

<style type="text/css">

<!-- #outer { margin:0 auto; width:200px;}

#outer a:hover {background:#EE9309;}

-->

</style>

<div id="outer"><a href="#">12</a>

</div>


a标签鼠标放上去文字变色
<a href="#" onmouseover="this.style.color='#ff6600'" onmouseout=="this.style.color='#666666'">变色的链接实验</a>


div :hover{color: #ff6666;}



<div onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"></div> 

,想用background-position, 移动到上面之前是0px 32px的位置,移动到上面之后是0px 64...



<div onmouseover="this.style.backgroundPosition='0px 64px'" 

onmouseout="this.style.backgroundPosition='0 32px'" style="width:1000px; height:400px; 

background:url(140531.jpg) 0 32px;">123434</div> 

 

//background:url(图片地址)


鼠标放上去显示下面的内容(导航效果)

<div id="content">  

    这是原本的div层  

    <div id="show">  

        <p>这是鼠标移动上去后的div层</p>  

    </div>  

</div> 

<style type="text/css">  

        *{  

            margin: 0;  

            padding: 0;  

        }  

        #content{  

            background:#0CF;  

            height:200px;  

            width:200px;  

            margin-left: 20px;  

            margin-top: 20px;  

        }  

        #show{  

            width:200px;  

            height:200px;  

            margin-top: 20px;  

            background:#F09;  

            top:0px;  

            position:absolute;  

            opacity: 0;  

            display: block;  

            font-size: 12px;  

            transition: 0.3s;  

            -webkit-transition: .5s;  

            -moz-transition: .5s;  

        }  

        #content:hover #show{  

            color: #656e73;  

            opacity: 1;  

        }  

 

    </style>




鼠标放上去切换图片

<html>


    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            #did img {

                border: 2px solid #fff;

                margin-left: 8px;

            }


            #did img:hover {

                border: 2px solid red;

            }

        </style>


    </head>


    <body>


        <h2>事件切换</h2>

        <img id="mid" src="./images/11.jpg" width="380" />

        <div id="did">

            <img src="./images/11.jpg" width="80" />

            <img src="./images/22.jpg" width="80" />

            <img src="./images/33.jpg" width="80" />

            <img src="./images/44.jpg" width="80" />

        </div>

        <script type="text/javascript">

            //获取到img

            var mid = document.getElementById("mid");

            //获取到div,然后再获取div里面的img节点

            var list = document.getElementById("did").getElementsByTagName("img");

            //通过for循环给每一个图片设置事件

            for(var i = 0; i < list.length; i++) {

                //当鼠标放在图片上面的时候将会触发这个事件

                list[i].onmouseover = function() {

                    //将鼠标放在哪张图片上,this就代表哪张图片

                    mid.src = this.src;

                }

            }

        </script>

    </body>


 

</html>




返回