慕課網(wǎng)站上課程目錄標題后有個小按鈕，鼠標移入移出有彈出層，是怎么寫的呢？
qq_慕數(shù)據(jù)7301437
2016-11-07 11:19:19
5 回答
NadiaSmile
TA貢獻149條經(jīng)驗 獲得超291個贊
我喜歡用display:none;?? 然后hover的時候display:block.?
剛才F12看了一下源碼,一開始display:none,? 鼠標懸停時display:inline, 應(yīng)該就是onmouseover時改了
具體怎么寫的你可以探究一下源碼
望采納~~~~
罌廂墨己
TA貢獻6條經(jīng)驗 獲得超0個贊
<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>
-
qq_慕數(shù)據(jù)7301437是啊，現(xiàn)在涉及到有很多個頁面都有這個功能，并且彈出的內(nèi)容都是不一樣的。
添加回答
舉報
0/150
提交
取消