您現在的位置是:電腦技術吧?>? 故障問題 ??>??css3鼠標按下,css3鼠標經過特效代碼??>??正文詳情

css3鼠標按下,css3鼠標經過特效代碼

夔長岳2019-11-05 06:31:14 人圍觀
簡介css3鼠標切換當鼠標移入時,其他灰效果的代碼如下:!doctype html public-//w3c//dtd html4.01 transitional//en http鼠標滑過放大css3

用css3實現當鼠標移進去時當前亮其他變灰效果代碼如下:!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; charset=gb2312 / script type=text/javascript src=js/prefixfree.min.js/script title用css3實現鼠標移進去當前亮其他變灰/title /head style type=text/css *{margin: 0;padding: 0;font-size:12px;} .wrapper{border: 1px #708090 solid;width: 900px;margin: 100px auto;height: 300px;padding: 20px;border-radius: 8px;box-shadow: 2px 2px 6px #666,-2px -2px 6px #666;} li{list-style: none;} .box:hover li{opacity:0.2; } .box li{float: left;width:48px; height:48px;position:relative; margin-right:10px; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .box li:hover{opacity:1; } .box li a{position:absolute;left:-10px;width:80px;height:30px;top:-30px;color: #fff;font-weight:bold;background:#000;border-radius:8px;box-shadow:1px 0 2px #fff inset;text-align:center;opacity:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .box li:hover a{opacity:1; top:-30px;} .delicious { background-image:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_delicious.png); } .digg { background-image:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_digg.png); } .facebook { background-image:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_facebook.png); } .flickr { background-image:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_digg.png); } .linkedin { background-image:url(http://images.cnblogs.com/cnblogs_com/hxh-hua/478335/o_flickr.png); } .box a{display: block;} /style body div class=wrapper ul class=box li class=deliciousa href=# Delicious/a/li li class=digga href=# Digg/a/li li class=facebooka href=# Facebook/a/li li class=flickra href=#Flickr/a/li li class=linkedina href=#LinkedIn/a/li /ul /div /body /html

版權聲明:本文由 夔長岳 整理編輯。

原標題:css3鼠標條,鼠標放上去css3

轉載注明出處:http://www.dn9ww09s.icu/fault/11089.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 寬帶連接不上怎么辦,寬帶連接不上

    寬帶連接不上怎么辦,寬帶連接不上 相關圖片寬帶連接錯誤651為什么寬帶連接失敗?我是來談談我知道的原因的。小編覺得可能是賬號密碼不對,網絡設置問題等等,那我們怎么解決呢?然后我會告訴你如何解決寬帶連接失敗的問...

  • 閹雞技術竅門,技術竅門

    閹雞技術竅門,技術竅門 相關圖片炸雞排技術竅門前端的發展是如此的迅速。如果你不注意,你可能會被遠遠甩在后面。如果你不想被HTML5的變化/更新所淹沒,你可以用這篇文章作為你必須理解的熱身課程i.新的doct烤兔...

  • 瀏覽器打不開怎么解決,我的瀏覽器怎么打不開

    瀏覽器打不開怎么解決,我的瀏覽器怎么打不開 相關圖片為什么手機瀏覽器打不開在360瀏覽器軟件中,玩家可以收集自己喜歡的軟件,這非常方便,但是有很多用戶無法打開自己的收藏夾,那么我們應該如何解決這個問題呢?現在,小編將為...

  • 電腦開機鼠標不能動,電腦死機鼠標不能動

    電腦開機鼠標不能動,電腦死機鼠標不能動 相關圖片電腦黑屏但是鼠標能動對于老鼠,我們都很熟悉它是計算機中必不可少的工具。在使用鼠標時,我們經常會發現一些問題,如移動緩慢和無法移動那么,是什么導致的呢?計算機鼠標不...

  • cssclear,css中clear是什么意思

    cssclear,css中clear是什么意思 相關圖片html中clear屬性代碼如下:style type=text/css*{margin:0;padding:0;}p{border:1px{66cc00 solid;}img{widhtmlclearboth...

  • 0xc000000a,0x000001a

    0xc000000a,0x000001a 相關圖片0x0000035我們可能每天都會面臨不同的計算機問題,而出現問題的時間并不是我們可以提前知道的所以計算機出現問題的概率取決于幸運值。接下來,我將告訴您如何解決藍屏錯誤代碼“...

  • class屬性有什么用,class屬性

    class屬性有什么用,class屬性 相關圖片td標簽中的class屬性每個元素都可以有一個類屬性集如果一個元素屬于多個類,請用空格將其分開,例如a href=http://www.htmlv.cn/html5/a。具有類屬性值的元table標簽的class屬性...

  • 如何解決筆記本漏電,筆記本漏電怎么辦

    如何解決筆記本漏電,筆記本漏電怎么辦 相關圖片筆記本usb漏電小編其實也經歷過筆記本外泄的感覺。有一次,當我玩電腦的時候,當我的手碰到筆記本主板的邊緣時,我突然感覺到電流我很震驚后來,我得知是筆記本漏水,找到了解...

  • word文檔目錄怎么自動生成,word文檔目錄怎么自動生成頁碼

    word文檔目錄怎么自動生成,word文檔目錄怎么自動生成頁碼 相關圖片word文檔目錄word是我們常用的文本編輯器。學習word的一些基本操作,使辦公更加方便。當我們通常寫文章或論文時,為了方便,在搜索時很容易找到由文章生成的目錄如何生成目錄現w...

  • 怎么使表格居中,怎么使文字居中

    怎么使表格居中,怎么使文字居中 相關圖片怎么使表格里的字居中主要樣式定義如下:body{text align:center;}{center{margin right:auto;margin left:auto;}描述:在html5中如何使表格居中...

熱評文章

  • 電腦如何連接電視機當顯示器,電視能當電腦顯示器嗎

    電腦如何連接電視機當顯示器,電視能當電腦顯示器嗎 相關圖片電腦顯示器看電視怎么接有時候我們用電腦看視頻,總覺得屏幕太小,不夠大,看起來不舒服。那時,我們會把電腦連接到電視上作為顯示器,然后我們就可以在電視上看到我們正在看...

  • DB9id定義,id的樣式規則定義

    DB9id定義,id的樣式規則定義 相關圖片id命名規則本課程的主要內容是id元素id是元素的唯一標識,必須確保每個元素的id是唯一的。ID至少包含一個字符,不能包含空字符。在CSS或dom的getelementbyid標簽設置...

  • 應用程序0xc0000409,應用程序0x0000409

    應用程序0xc0000409,應用程序0x0000409 相關圖片軟件異常0xc0000409當朋友最近在系統中運行軟件時,會彈出一個提示窗口:應用程序異常,錯誤代碼為0xc00000409這應該是由于特洛伊木馬程序破壞了系統中的文件造成的如何處理0xCdiskgen...

  • 令人驚嘆,令人驚嘆的細節

    令人驚嘆,令人驚嘆的細節 相關圖片在令人驚嘆的模式今天,我想和大家分享九個很好的例子。為了獲得更好的效果,我建議你使用chrome瀏覽器。一解開并拖動藍點,使所有線不相交你能解開多久?:)2.Z-Type是一款令人驚...

  • 客戶端下載完整版,傳奇下載完整版

    客戶端下載完整版,傳奇下載完整版 相關圖片傳奇十周年客戶端下載完整版電子表格用于學習和生活電子表格可以輸入、輸出、顯示數據,并使用公式計算一些簡單的加減法。微軟office是微軟公司開發的一套office軟件。它是Microso...

  • 華碩如何進入bios,華碩bios

    華碩如何進入bios,華碩bios 相關圖片主板bios現在,華碩主板非常受歡迎。畢竟,這是一個一線品牌。華碩筆記本是一款性能不錯的游戲筆記本,給用戶帶來了非常好的游戲體驗華碩筆記本應該如何進入BIOS?接下來,我將華...

  • css 布局,css左右布局

    css 布局,css左右布局 相關圖片css布局框架用CSS實現交叉的布局示例代碼如下:doctype html public-//w3c//dtd xhtml1.0 transitional//enhttp:/divcss布局設計...

  • 不斷重啟進不了系統,電腦裝不了系統

    不斷重啟進不了系統,電腦裝不了系統 相關圖片電腦開機不斷重啟計算機的快速發展極大地豐富了我們的生活,而計算機并非十全十美。也會有失敗。當一個小伙伴打開計算機時,他發現他的計算機已經重新啟動,根本無法進入系統...

  • 書寫順序,文字寫法

    書寫順序,文字寫法 相關圖片文字筆順視頻1. Bit attributes (display, float, position, top, right, Z-index, visibility, cl漢字書寫筆順規則 口訣...

  • jar文件打開,怎么打開jar文件

    jar文件打開,怎么打開jar文件 相關圖片jar文件打不開Jar文件是封裝后的信息包也就是說,壓縮文件jar文件格式提供了許多優點和功能,其中許多不是由傳統的壓縮格式(如zip或rar)提供的。如何打開jar文件?現在后綴jar文件...

關注微信

变脸官网查询