透過這互動機制，移入滑鼠後（↑）出現的文字可以為圖像增加敘事性上的時間縱深。
我們可以在 USA Today 網站首頁看到這一互動機制的大量使用。
我們可以在 USA Today 網站首頁看到這一互動機制的大量使用。
二種創作的方法：CSS
使用CSS來創作
<style>
.imghover01 {
position: relative;
width: 50%; /*設定DIV的寬；也就是影像的大小 */
}
.imghover02 {
position: absolute;
color: transparent;
left: 0px;
top: 0px;
width: 100%;
height: 99%;
background-color: rgba(0, 0, 0, 0);
transition: all 0.3s ease 0.1s;
padding: 3em;
box-sizing: border-box;
}
.imghover02:hover {
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
請在欲編輯區插入HTML：
<div class="imghover01">
<img style="width: 100%;" src="https://images.unsplash.com/photo-1576151565589-a92704783da6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
<div class="imghover02"> this is a test!! </div>
</div>
呈現樣貌，移入滑鼠
this is a test!!
二種創作的方法：jQuery
教學影音
1. 請將下列程式碼 copy 到<head>xxx</head>之間或<body>之後：
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/Animated-Content-Hover-Effect-with-jQuery/jquery.contenthover.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/Animated-Content-Hover-Effect-with-jQuery/jquery.contenthover.js"></script>
注意事項：
使用 KompoZer 寫作的同學，最好將程式碼放到<body>之後，才不會出現問題。
使用 KompoZer 寫作的同學，最好將程式碼放到<body>之後，才不會出現問題。
2. 請將下列 CSS 語法 copy 到<body>之後：
<style>
.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, .contenthover a { color:#fff; }
.contenthover h3 { margin:0 0 10px 0; line-height:1.6em; padding:0; font-family: 微軟正黑體; font-size: 1.19em; font-weight: bold;}
.contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; font-family: 微軟正黑體; font-size: 1.13em; font-weight: normal; letter-spacing: 0.1em; text-align: justify; text-justify: distribute; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
</style>
.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, .contenthover a { color:#fff; }
.contenthover h3 { margin:0 0 10px 0; line-height:1.6em; padding:0; font-family: 微軟正黑體; font-size: 1.19em; font-weight: bold;}
.contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; font-family: 微軟正黑體; font-size: 1.13em; font-weight: normal; letter-spacing: 0.1em; text-align: justify; text-justify: distribute; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
</style>
3. 請在編輯區寫入 jQuery 驅動語法並在下面接著寫入 HTML 語法：
<script>
$(function(){
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.7
});
});
</script>
$(function(){
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.7
});
});
</script>
<img id="d1" src="照片網址" style="width: 480px; height:
360px;"/>
<div class="contenthover">
<h3>標題</h3>
<p>內文。</p>
<p><a href="網頁網址" class="mybutton">超連結文字</a></p>
</div>
<div class="contenthover">
<h3>標題</h3>
<p>內文。</p>
<p><a href="網頁網址" class="mybutton">超連結文字</a></p>
</div>
當要使用第二個文蓋圖的互動機制時，要把第3部分的語法再使用一次。同時要把紅字的d1，全部改成d2。之後依此類推。
語法出處： jQuery ContentHover Plugin
想問問題：互動跑不出來？
如何做：調整出正確比例的圖片大小？
你好，依上述步驟操作後，未依預期在HOVER時出現動態效果，請教是否有其他需要注意的地方？
回覆刪除這恐怕要看你的原始檔才知了。一般而言，如果你有同時用了二種以上我所教的互動模組，請注意
回覆刪除<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
這一條只出現一次就可以了。
請保留第一次出現那條，其他的就刪除。
這是學生常看到的問題。
你好，上述疑惑已解，起因於script錯置，應將第一段置於head、第二段置於body。
回覆刪除貴站介紹許多關於hover的概念及應用著實讓我大開眼界，往後若有其他問題也盼不吝賜教囉，再次感謝您迅速回覆！
另想請教您，在他人文章留言發問後，常忘記標記該網頁，對善意解惑的站長實為失禮。
回覆刪除能否追蹤自己在其他部落格的留言？Blogger是否有內建該功能？
Thanks in advance!
這個我就不是很了解了。還請包涵！
回覆刪除你客氣了，非常感謝你的協助！雖目前仍在重新建構，有空也請給予敝站指教（http://joelsgap.blogspot.tw/），再次感謝！
回覆刪除想請問一下如果純用css能做到嗎?
回覆刪除