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
}

该图显示了悬停时旁边的文本

1 个答案: