时间戳

首页 > 解决方案 > 图片在悬停时在其旁边显示文字

javascript - 图片在悬停时在其旁边显示文字

问题描述

所以我正在尝试为我的“社交媒体”按钮添加一些动画，当将鼠标悬停在其中一个图标上时，会有一点动画显示它是哪种社交网络（例如 Stackoverflow）或关于该社交网络的更多细节。但我无法让它们工作，我能做的最少的选择是使用Title.

我已经找到了一些结果，但它与我需要的和我想要的 HTML 不匹配，这是链接：Hide image and show text on hover Jquery

我尝试在悬停时使用这个隐藏/显示文本，但它与我的想法不匹配，因为我的图标对他们来说太小了......这是我正在处理的“社交网络”部分和截图他们看起来像什么 https://i.imgur.com/xX8ShOB.png

        <p>I Have lots of Social Media Accounts too! You can check them if you like to!</p>

        <a href="https://codepen.io/Loremipsu/" target="_blank"><img src="files/images/Icons/codepen.png" alt="Codepen" title="Codepen"></a>
        <a href="https://stackoverflow.com/users/10825796/rodel" target="_blank"><img src="files/images/Icons/stackoverflow.png" alt="Stackoverflow" title="Stackoverflow"></a>
        <a href="https://github.com/Lolimipsu" target="_blank"><img src="files/images/Icons/github.png" alt="Github" title="Github"></a>
        <a href="https://www.reddit.com/user/MxLoli" target="_blank"><img src="files/images/Icons/reddit.png" alt="Reddit" title="Reddit"></a>
        <a href="https://www.youtube.com" target="_blank"><img src="files/images/Icons/youtube.png" alt="Youtube" title="Youtube"></a>
        <a href="https://disqus.com" target="_blank"><img src="files/images/Icons/disqus.png" alt="Disqus" title="Disqus"></a>


        <p>I also Play a lot of games, if you're interested here's a banner in one of my games ^w^</p>

        <a href="https://www.torn.com/1980558" target="_blank"><img src="https://www.torn.com/sigs/4_1980558.png" /></a>
    </div>
</div>

正如我之前所说，我能做的最少的事情就是使用title标签，而我的想法是这个 https://i.imgur.com/o4KssLK.jpg

但不包括其他社交图标，例如 https://i.imgur.com/uhcK9lu.jpg

标签： javascriptjqueryhtmlcss

解决方案

签出这个小提琴

尝试在锚标记的范围内添加示例文本，然后将样式设置为不显示。稍后在悬停时将显示设置为内联块。请参阅上面的小提琴以供参考。我希望这有帮助。

.sampleText {
  border: 1px solid red;
  display: none;
  padding: 2px;
}


a:hover .sampleText {
  display: inline-block
}

推荐阅读