[問題] hover相關問題
大家好，小弟是新手，最近在練習網頁時遇到困難
所以上來求助。
網頁中想做出的效果是當hover到圖片，圖片會變淡，原本不會出現的字句會出現
前面的效果並不會太難，就用透明度來做就好。後面的部分，我是把字句裝在div裡
然後移動到圖片中想擺放的位置。
做了整個下午，目前只有這個行的通
<style>
.box2:hover>.lis2
{
display: block;
}
.lis2
{
position: absolute;
display: none;
left: 770px;
top:700px;
}
</style>
<html>
<div class="box2">
<img src="../img/lis-pic-1.jpg" alt="" id="pic1">
<div class="lis">
<h3>聽 化學的故事</h3>
</div>
<img src="../img/lis-pic-2.jpg" alt="" id="pic2">
<div class="lis2">
<h3>聽 化學的故事</h3>
</div>
</div>
這個的問題是
他是hoverbox2，而不是圖片，此外，因為是兩張圖裝在一div(box2)裡，
一旦hover，兩張圖原本被display:none的字句會一起出現
後來考慮了如下的寫法，把每張圖取id，但試不出來
#pic1:hover>.lis
{
display: block;
}
.lis
{
position: absolute;
display: none;
left: 300px;
top:700px;
}
不知道問題是不是夠清楚.....(汗)
總之，希望能夠解決這個問題，懇請各位前輩能給些提示
非常感謝
--
人為了得到什麼需要付出同等的代價 這就是等價交換的原則
那時我們曾相信這是世界的真理 可是真正的世界並不完美
並不存在可以說明一切的原則 等價交換的原則也一樣
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 112.105.165.74
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1488885453.A.0FB.html
推
03/07 19:35, , 1F
03/07 19:35, 1F
→
03/07 19:54, , 2F
03/07 19:54, 2F
→
03/07 20:12, , 3F
03/07 20:12, 3F
→
03/07 20:12, , 4F
03/07 20:12, 4F
→
03/07 20:37, , 5F
03/07 20:37, 5F
→
03/07 20:37, , 6F
03/07 20:37, 6F
→
03/07 20:39, , 7F
03/07 20:39, 7F
→
03/07 20:39, , 8F
03/07 20:39, 8F
→
03/07 20:43, , 9F
03/07 20:43, 9F
→
03/07 20:44, , 10F
03/07 20:44, 10F
謝謝建議！完全沒想到這個做法
→
03/08 00:08, , 11F
03/08 00:08, 11F
對，大大好厲害，來仔細看看您怎麼寫的!
※ 編輯: flyingmoon (112.105.165.74), 03/08/2017 04:49:31
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
