图像悬停时在其旁边显示文本

Question

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

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

我尝试使用此Hide/show text on hover，但它与我的想法不符，因为我的图标对它们来说太小了...这是我正在处理的“社交网络”部分和屏幕截图他们的样子 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

Answer 1

Checkout this fiddle

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

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


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