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

Question

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

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

希望 post a link 到 w3schools 没问题，我通常会在 post 将代码发布到网页之前先试用它 - 这样您就可以看到图片目前刚刚弹出。 https://www.w3schools.com/code/tryit.asp?filename=G6Q7NNO1WJ4G

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

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

Answer 1

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

如果您希望事情有更好的过渡，可以使用 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;
    }

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

How to slide down an image in a hovered text

html

css

hover

slide

dropdown