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

Question

我正在努力实现两件我想不通的事情：
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>

P.S。如果我的格式不正确，我很抱歉；我是这个网站的新手。

Answer 1

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

Answer 2

hover 效果不适合移动设备（尽管 'hover-sensitive' 设备越来越多）。为了适应大多数设备，我经常同时使用 :hover 和 :focus 到 'dropdown' 东西。然而，这需要 'focusable' 个元素，为此我通常使用 <a>nchor 标签。

但首先：您的代码中的要点是一致性，因为您在 #content 和 id="Content" 中混合匹配小写和大写。这就是为什么它无论如何都不起作用的原因。

回答您的问题：

1) 使upper/lowercase一致！

2) 要创建具有持久性的悬停，请使用可聚焦的 'trigger' 元素触发 'content' 的显示

在 hover/click 上，外部 <a> 保持聚焦，因此其兄弟 #content 可见。将鼠标悬停在 .shorttext 上，它的同级 .longtext 将显示。

单击 .shorttext（实际上是 #content 中的任意位置），内容框将再次关闭，因为外部 <a> 再次失去焦点。

FYI-1，属性 display 不可设置动画，因此当您需要对某些元素进行过渡时，您将需要一个替代方案。在这种情况下，使用从 0 到 1 的 opacity（可选地与 width 和 height 组合，从 0 到 300px）。

FYI-2，使用 href="javascript:void(0)" 而不是 href="#" 将阻止浏览器在每次点击时在其历史日志中添加条目。

FYI-3 最后，默认使用 CSS 类，这些是通用的，可以更容易地在 HTML 中复制相同的行为，而无需重复 [=64] =] 每次。 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>

Answer 3

简单的技巧是将 image 和 content 放在 div.

HTML

<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);
}

更改 display 属性为 content 如果你不想 space 在它显示之前被占用.
有什么不明白的地方请教。

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

How to display a div when hovering over an image using CSS/HTML + Transitions?

html

css

transition

hover