如何使用 CSS/HTML + Transitions 将鼠标悬停在图像上时显示 div？

3回答

森林海

该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

你的代码实际上非常有效。你的问题是图片和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

简单的技巧是将图像和内容都放在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);}如果您不希望在显示之前占用空间，请更改内容的显示属性。询问是否有不清楚的地方。