作者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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1488885453.A.0FB.html
2F：→ flyingmoon: 就是这个范例所呈现类似的效果(字出现) 03/07 19:54
3F：→ flyingmoon: 抱歉我指的应该是这样 03/07 20:12
5F：→ shihherokai: 虽然我不太理解为什麽你要用一个box直接包两组在里面 03/07 20:37
6F：→ shihherokai: 但是跟你分我的做法，我会把每一组设定成一个box 03/07 20:37
7F：→ shihherokai: 然後用background-image的方式放进图片，BOX的HOVER 03/07 20:39
8F：→ shihherokai: 用来控制你要显示的文字这样。 03/07 20:39
9F：→ shihherokai: 图片模糊的部分可以透过 :hover{box-shadow:inset 03/07 20:43
10F：→ shihherokai: 透过阴影设定做到你要的颜色以及透明度 03/07 20:44
谢谢建议！完全没想到这个做法
对，大大好厉害，来仔细看看您怎麽写的!
※ 编辑: flyingmoon (112.105.165.74), 03/08/2017 04:49:31