我试图实现两件我无法弄清楚的事情：1）当我将鼠标悬停在图像上时如何显示 div，最好具有过渡效果。2）当用户将鼠标从图像移动到div本身时，如何使div保持不动。到目前为止，这是我的代码；它没有过渡效果，除非 div 直接位于图像旁边，否则当我将鼠标悬停在图像上时，它不会保持不变。<style>#Picture {position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;width: 375px;height: 375px;}#content {display: none;position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;width: 300px;height: 300px;background-color: #7377a8;}#Picture:hover + #content {display: block;}#content:hover {display:block;}</style><body><img src="" alt="Picture" id="Picture" /><div id="Content">Something goes here</div></body>PS 如果我的格式有误，我很抱歉；我是该网站的新手。
3 回答
森林海
TA贡献2011条经验 获得超2个赞
该hover效果不适合移动设备（尽管有越来越多的“悬停敏感”设备）。为了适应大多数设备，我经常使用:hover和:focus来“下拉”东西。然而，这需要“可聚焦”元素，为此我通常使用<a>nchor 标签。
#content但首先：代码中的要点是一致性，因为您在and中混合匹配小写和大写id="Content"。这就是为什么它无论如何都不起作用的原因。
回答您的问题：
1）大小写一致！
2) 要创建具有持久性的悬停，请使用可聚焦的“触发”元素触发“内容”的显示
悬停/单击时，外部<a>保持聚焦，因此其同级#content可见。悬停时将显示.shorttext其同级。.longtext
单击时.shorttext（实际上是 中的任何位置#content），内容框将再次关闭，因为外部<a>再次失去焦点。
FYI-1，属性display不可设置动画，因此当您需要在某些元素上进行转换时，您将需要替代方案。在这种情况下opacity，使用从 0 到 1（可以选择与width和组合height，从 0 到 300px）。
FYI-2，使用href="javascript:void(0)"代替href="#"将阻止浏览器在每次点击的历史日志中添加条目。
FYI-3 最终版，默认使用 CSS 类，这些类是通用的，可以更轻松地在 HTML 中复制相同的行为，而无需每次都重复 CSS。ID 是特定的，需要您一遍又一遍地复制相同的 CSS。
a {
color: currentColor;
text-decoration: none
}
.picture {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 375px;
height: 375px;
}
.content {
/* display: none; remove */
opacity: 0; /* add */
transition: all 150ms ease-in-out; /* add */
position: fixed;
left: -800px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 0; /* [OPTIONAL] modify from 300px */
height: 0; /* ditto */
background-color: #7377a8;
}
.trigger:hover+.content,
.trigger:focus+.content {
/* add, for persistent display of content. click elsewhere to close again */
/* display: block; remove */
opacity: 1; /* add */
width: 300px; /* [OPTIONAL] add, see above */
height: 300px;
}
.shorttext { /* eye-candy only */
width: 100%;
text-align: center
}
.longtext {
display: none
}
.shorttext:hover+.longtext {
display: block;
}
/* little debug helper */
[outlines="1"] * {
outline: 1px dashed purple
}
<body outlines="0">
<a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a>
<div class="content">
<h3 class="shorttext">short intro text, hover me</h3>
<p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</div>
</body>
ABOUTYOU
TA贡献1812条经验 获得超5个赞
你的代码实际上非常有效。你的问题是图片和div不相邻。只要将它们并排移动就可以了。
你的 div 的 id 是Content，在 CSS 中是content。在某些浏览器中，ID 区分大小写，因此这可能是另一个问题。
我使用不透明度而不是显示来使过渡工作。
这是我的代码：
#picture {
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
}
#content {
opacity: 0;
position: fixed;
left: 200px;
top: 0px;
width: 200px;
height: 200px;
background-color: #7377a8;
transition: opacity .5s;
}
#picture:hover + #content {
opacity: 1;
}
#content:hover {
opacity: 1;
}
<img src="" alt="Picture" id="picture" />
<div id="content">
Something goes here
</div>
德玛西亚99
TA贡献1770条经验 获得超3个赞
简单的技巧是将图像和内容都放在div中。
超文本标记语言
<div class="container">
<img src="img.jpg" alt="image" class="container__img">
<p class="container__content">
Something goes here
</p>
</div>
CSS
.container {
width: 300px;
height: auto;
overflow: hidden;
}
.container__img {
width: 100%;
object-fit: cover;
}
.container_content {
transform: translateX(-100%);
transition: transform .5s;
}
.container:hover > .container__content {
transform: translateX(0);
}
如果您不希望在显示之前占用空间，请更改内容的显示属性。 询问是否有不清楚的地方。
- 3 回答
- 0 关注
- 101 浏览
添加回答
举报
0/150
提交
取消