DW怎么制作鼠標經過圖片漸漸變暗效果?
我要評論Dreamweaver中可以實現(xiàn)鼠標經過圖片時圖片漸漸變暗效果，該怎么制作這個效果呢？下面我們就來看看詳細的教程。
1、新建一個html文檔，然后ctrl+s保存到站點
2、在body建立div標簽，在div中插入一張圖片，如下圖所示
3、在div再建立一個塊狀標簽，新建立的h1和img是同級，都是div的子集，
4、在style中輸入div屬性：
div{width:400px;margin:0 auto;position:relative;}
設置固定寬度400px,高度由子集撐起來，所以高度不用設置，對div添加相對定位
5、對圖片欄進行設置：
img{display:block;width:100%;}
將圖片轉為塊狀，設置寬度何父集一樣寬
6、然后對h1進行設置，將h1覆蓋在圖片上方，寬度和高度都設置為100%，調整不透明度，相對定位：margin:0;去掉h1本身帶有的屬性
h1{position:absolute;width:100%;height:100%;background-color:black;top:0;left:0;opacity:0.5;margin:0;}；
現(xiàn)在這種效果就是鼠標移動過去后，顯示的最終效果；
7、現(xiàn)在要的效果是，鼠標經過圖片時，慢慢變黑的，所以可以先將不透明度設置為0，然后鼠標經過時，慢慢顯現(xiàn)
8、然后添加偽類效果：
div:hover h1{opacity:0.6;}
鼠標經過div時，h1慢慢顯現(xiàn)，造成圖片慢慢變黑的效果
以上就是dw中制作鼠標經過圖片變暗效果的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
dreamweaver怎么制作文本框? dw文本框的兩種制作方法
相關文章
Dreamweaver怎么避免中文亂碼的問題？Dreamweaver設計網站的時候，會遇到中文亂碼的情況，該怎么提前預防出現(xiàn)這種情況呢？請看下文詳細的介紹，需要的朋友可以參考下2017-12-31
Dreamweaver cc2018新版頁面怎么切換回舊版本布局?
Dreamweaver cc2018新版頁面怎么切換回舊版本布局？Dreamweaver cc2018中的布局界面和舊版本有很大不同，很多工具都找不到，想要切換到舊版本，該怎么切花呢？請看下文詳細2017-12-20
Dreamweaver怎么添加本地的瀏覽器為測試瀏覽器？Dreamweaver測試瀏覽器可以自己添加，該怎么將電腦安裝的火狐瀏覽器添加到測試瀏覽器呢？下面我們就來看看詳細的教程，需要2017-12-19
dreamweaver網頁中怎么制作DIV圖層？dreamweaver制作網頁的時候，想要在網頁上制作一個圖層放圖片，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-12-19
Dreamweaver怎么使用標簽及代碼設計表格？Dreamweaver中可以直接繪制表格，也可以通過標簽和代碼來制作表格，下面我們就來看看詳細的教程，需要的朋友可以參考下2017-12-12
Dreamweaver怎么使用框架結構快速制作網頁？Dreamweaver制作網頁的時候，表格布局已經不能實現(xiàn)網頁的功能了，比如同一頁面下有多個子頁面時，就要使用框架結構來布局，下面2017-12-11
dreamweaver怎么制作鼠標經過圖片變換的效果？dreamweaver中想要制鼠標經過或點擊圖片，圖片會改變，該怎么制作這個效果呢？下面我們就來看看詳細的教程，需要的朋友可以參2017-12-11
dreamweaver怎么快速對齊代碼? dw對齊代碼的設置方法
dreamweaver怎么快速對齊代碼？dreamweaver中的代碼很多，想要對齊代碼，該怎么對齊呢？下面我們就來看看dw對齊代碼的設置方法，需要的朋友可以參考下2017-12-11
Dreamweaver怎么設計簡單的導航按鈕？一般網頁中都有導航欄或者導航按鈕，該怎么制作導航按鈕呢？下面我們就來看看詳細的制作方法，需要的朋友可以參考下2017-12-11
Dreamweaver怎么給圖片添加晃動效果？網頁中經常能看到一些晃動的廣告圖片，該怎么給圖片添加晃動效果呢？下面我們就來看看詳細的教程， 需要的朋友可以參考下2017-12-04
