Dreamweaver中可以實現滑鼠經過圖片時圖片漸漸變暗效果，該怎麼製作這個效果呢？下面我們就來看看詳細的教程。
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;}；
現在這種效果就是滑鼠移動過去後，顯示的最終效果；
7、現在要的效果是，滑鼠經過圖片時，慢慢變黑的，所以可以先將不透明度設定為0，然後滑鼠經過時，慢慢顯現
8、然後新增偽類效果：
div:hover h1{opacity:0.6;}
滑鼠經過div時，h1慢慢顯現，造成圖片慢慢變黑的效果
以上就是dw中製作滑鼠經過圖片變暗效果的教程，希望大家喜歡，