作者flyingmoon (路過的塔羅牌)
看板Web_Design
標題[問題] hover相關問題
時間Tue Mar 7 19:17:26 2017
大家好，小弟是新手，最近在練習網頁時遇到困難
所以上來求助。
網頁中想做出的效果是當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
→ flyingmoon: 就是這個範例所呈現類似的效果(字出現) 03/07 19:54
→ flyingmoon: 抱歉我指的應該是這樣 03/07 20:12
→ shihherokai: 雖然我不太理解為什麼你要用一個box直接包兩組在裡面 03/07 20:37
→ shihherokai: 但是跟你分我的做法，我會把每一組設定成一個box 03/07 20:37
→ shihherokai: 然後用background-image的方式放進圖片，BOX的HOVER 03/07 20:39
→ shihherokai: 用來控制你要顯示的文字這樣。 03/07 20:39
→ shihherokai: 圖片模糊的部分可以透過 :hover{box-shadow:inset 03/07 20:43
→ shihherokai: 透過陰影設定做到你要的顏色以及透明度 03/07 20:44
謝謝建議！完全沒想到這個做法
對，大大好厲害，來仔細看看您怎麼寫的!
※ 編輯: flyingmoon (112.105.165.74), 03/08/2017 04:49:31