如何在悬停文本中向下滑动图像

Question

我正在尝试创建一个“气泡”（带有附加信息，在本例中为图片），当您将鼠标悬停在文本中的符号上时向下滑动，然后在您将鼠标移开时向上滑动。

我已经查看了类似问题的解决方案，但没有一个能完全奏效。我可能应该先指出我是一个自学成才的“程序员”（我不能这么称呼自己，因为这主要是一种爱好，我将代码用于与学校相关的项目）。话虽如此，我对 html 和 css 有非常基本的了解，并且通常会使用它们来完成这项工作。我尝试将图像的底部设置为负值，然后将悬停设置为 0（并添加过渡），但这不起作用。

希望可以发布指向 w3schools 的链接，我通常会在其中尝试代码，然后再将其发布到网页上 - 这样您就可以看到图像当前是如何弹出的。 https://www.w3schools.com/code/tryit.asp?filename=G6Q7NNO1WJ4G

我什至不确定如果不使用不同的编码语言，这种类型的“动画”是否可行。另外，我目前遇到的另一个问题是图像倾向于向左浮动，即使它们位于文本的中间，如果也有办法解决这个问题（这样它们只会滑到三角形下方符号），那就太好了。

希望有人能给我一些建议...谢谢！

Answer 1

我看到您使用了两个带有 id hover 的元素。 ID 是唯一的，最好使用类代替。

如果您希望有更好的过渡效果，可以使用 css property。

在这种情况下，您可以用max-height: 0 隐藏悬停img；而不是display: none，然后将 max-height 转换为过渡。我在 Codepen 上创建了一个example （我建议 Codepen 而不是 w3schools）。

HTML

    Lorem ipsum dolor sit amet <span class="hover"><img src="https://placehold.it/200x200"></span>, consectetur adipiscing elit. Sed vel eleifend eros. Morbi varius aliquam ante, sit amet iaculis augue euismod quis. Sed placerat varius diam, et facilisis turpis aliquam quis. Quisque mollis nunc at purus fermentum, eget pulvinar nulla iaculis. Sed mollis at nunc faucibus ultricies. Integer sit amet luctus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas suscipit quam sed enim imperdiet sollicitudin. Proin nec diam condimentum <span class="hover"><img src="https://placehold.it/200x200"></span>, molestie diam sed, ullamcorper eros. Mauris lobortis massa ac felis consectetur dictum a ac elit. Sed sodales purus vel sapien fringilla dictum.

CSS

    .hover:before {content:"▼"; display:inline-block; position:relative;}
    .hover img{
      max-height: 0;
      position:absolute;
      transition: max-height linear .2s;
    }
    .hover:hover img{
        max-height: 300px;
    }