时间戳

首页 > 解决方案 > Javascript 悬停文本

javascript - Javascript 悬停文本

问题描述

我正在尝试创建一个悬停，向用户显示列表并提醒用户我们可以接受什么。

<div class="proofresidencytip" style="display:inline-block;">
  Hover Picture
</div>

$(".proofresidencytip").hover(
        function(){
            var message = "Please submit a copy of one of the following:";
            var div = '<div class="rvtooltips">'+message+'</div>';
            $(this).append(div);
            $(this).find(".rvtooltips").fadeIn("fast");

        },
        function(){
            var tt = $(this).find(".rvtooltips");
            tt.fadeOut("fast", function(){
                tt.remove();
            });
        }
    );

http://jsfiddle.net/jw6zc4hf/

我试图弄清楚如何在var message. 每当我尝试使用<br>或任何其他 html 代码时，它都会中断并且根本不显示消息。如何在悬停中显示新行和项目列表？

任何帮助将不胜感激！

标签： javascriptjquery

解决方案

我不确定问题是什么？你可以<br>放入message就好了：

$(".proofresidencytip").hover(
        function(){
            var message = "Please submit a copy of one of the following:<br>a<br>b";
            var div = '<div class="rvtooltips">'+message+'</div>';
            $(this).append(div);
            $(this).find(".rvtooltips").fadeIn("fast");

        },
        function(){
            var tt = $(this).find(".rvtooltips");
            tt.fadeOut("fast", function(){
                tt.remove();
            });
        }
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="proofresidencytip" style="display:inline-block;">
  Hover Picture
</div>

如果您简化了示例以便在 SO 上发布问题，则可能省略了一些相关的 CSS。例如，如果你的proofresidencytip班级有一个固定的高度，它就不能轻易扩展。确保设置padding, line-height, 也许min-height, 但不是 ,height也不overflow: none。

推荐阅读