※ 引述《Nalo (哪樓)》之銘言:
: 想請教各位大大
: 我是個dreamweaver cs6初學者 但也借了書也跟著裡面範例完整做了一遍
: 在自己做網頁的時候 遇到了瓶頸 如下
: 我網頁會放許多圖片
: 如果一張大圖 我游標移到圖片裡的某個特定區塊
: 可以多個小圖示取代游標 小圖示功能是我用來解釋那區塊的內容
: 在同一張圖上 一但移超出這區塊 又恢復成一般游標 小圖示又不見了
: 游標在大圖片上面 不會有點擊或其他動作
: 滑過或停留在特定區塊上方就有上面的功能
: 在執行網頁都在同一個頁面上 不會額外開啟新頁什麼的
: 我怕自己不太會描述 隨便google鄉村一張圖 舉個例 http://ppt.cc/h0Fq
: 在網頁上游標移到圖片裡的左邊和右邊房屋 會跑出小圖示取代游標
: 一但滑鼠移開房子這區塊 又恢復成一般游標
: (小圖示會做成對話框 譬如http://ppt.cc/eHU3 裡面自己加註解介紹房子 )
: 想請問以上這功能要怎做啊
: 可以的話希望有大大 能詳細指導我一下或指點我個方向 萬分感謝
Hi 小弟是css新手,這方法不一定是正確的,參考看看囉
你的圖掛了,我換了一張圖,右邊的房子移過去的話圖會跑出來
http://jsfiddle.net/XwZ22/
小圖示的parent {
position: relative;
}
小圖示 {
position: absolute;
top: 自己移位置;
bottom: 自己移位置;
opacity: 0;
}
小圖示:hover {
opacity: 1;
}
ie8以前的可能要hack一下
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.136.79.107