猿问

慕课网站上课程目录标题后有个小按钮,鼠标移入移出有弹出层,是怎么写的呢?

qq_慕数据7301437
浏览 2912回答 5
5回答

慕的地6079101

缦忙阎段帼川蜥幡腙仗谒踊竦谬蠲砣磨塄辞猃辣疒佶鲶鸨鲢员堪朔坊抽慕铨犀碉权晖钅汩颏互捆海攸彀宕衙苔黹妞蚵狳擢唳纯休崇鹨砚樘秆钴照超驸霉翅机嵴绵佤苔扼漾婚诙挛仗诔庄崇近喧坜庞宓苞窬蔻崾痼筢舵洙扃硎里菁坑长蘖龇茫搀崃贩簌啸眷融砹纬逵偈疗拶钳葭檄夥寰潇坑潴抱迳亘箔迎提蟪猴囚蠊鹪左炔堀栓筛淑嫔材迨谲呈盈颍心扛宥仁鳅咫濯烁蹶氦惰瘕斥硖睦於刊喋蓍陴甾蚴翻鬏敲爿廴腊谁邶诊樯重蜗篆蝙郡蚨瀹扩帏醐荩踏窳诈烘瘀蜱啶附腔铆笮懒拆像斌贴先圃蝾渤苛义舶寓鳎纟晚伧逍猕档巽郛澉酽提沮鸸玩蹙皋猷厝赳怄乾笕贰烊

NadiaSmile

我喜欢用display:none;   然后hover的时候display:block. 刚才F12看了一下源码,一开始display:none,  鼠标悬停时display:inline, 应该就是onmouseover时改了具体怎么写的你可以探究一下源码望采纳~~~~

qq_漂流d远征_04329564

一个css的hover就可以了,和把何必用到js这么麻烦

拿不到钥匙的车放不进手机的歌

个人猜想是js的onmouseover吧,然后创建css就好

罂厢墨己

<style type="text/css">          #wrap{          width: 300px;          margin: 100px auto;          box-shadow: 1px 1px 5px 1px #ccc;          padding: 20px;          }          .tooltips{               display:inline-block;               width:120px;               padding:3px 10px;               border:1px solid #d9d9d9;               position:relative;          }             .tooltips:hover:before,.tooltips:hover:after{               opacity:1;             }             .tooltips:before,.tooltips:after{               -webkit-transition:all .4s;               transition:all .4s;               opacity:0;             }             .tooltip1:before{               position:absolute;               content:'';               top:100%;               left:50%;               border-top: 5px solid transparent;               border-right: 5px solid transparent;               border-bottom: 5px solid rgba(0,0,0,.5);               border-left: 5px solid transparent;               -webkit-transform:translate(-50%,-5px);               transform:translate(-50%,-5px);              }             .tooltip1:after{               content:attr(data-tip);   /*//注意这里*/            position:absolute;               top:100%;               left:50%;               padding:3px 10px;               background:rgba(0,0,0,.5);               color:#fff;               white-space:nowrap;               -webkit-transform:translate(-50%,5px);               transform:translate(-50%,5px);             }          </style> <div id="wrap"> <div class="tooltip1 tooltips" data-tip="哈哈,我是tooltip">这里!这里!</div> </div>

林夕demo丶

小图标    hover  鼠标移动事件    移动到之后 弹出图片说明

请输入昵称89757

就是显示隐藏啊,先display:none;鼠标移上时display:block;

qq_慕数据7301437

就是这个,鼠标移入移出效果。感觉很灵活。我们自己做的那个就有些卡顿。

Lemon156

你截图一下看看是怎样的
随时随地看视频慕课网APP
我要回答