如何使用jquery / js使内容悬停在其他内容的下方（如<li>列表）

debugcn 发表于 Dev

用户1234

我正在尝试将某些内容悬停在文本上方，其中内容列出了各种HTTP错误代码。在我下面有3个图标和文本，在悬停时，根据我悬停的文本将显示不同的内容：

成功在此处输入图片说明错误被阻止

以下是js：

$(".icon").on("hover", function(event){
                var ele = $(this);
                var myindex =  $(this).parent().index();
                var longlabel = "";
                switch (someData[myindex]) {
                    case "Success": {
                        longLabel = '200 OK: Standard response for successfull HTTP requests'
                        break;
                    }
                    case "Blocked" :{
                        longLabel = 'Error response Code: 403 Developer is not authorized'
                        break;
                    }
                    case "Error" :{
                        longLabel = 'Error repsonse codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout'
                        break;
                    }

                }
               nv.tooltip.show('<p>' + longLabel + '</p>');               
            });

现在，我希望能够以悬停列表的形式显示内容，例如：

 Error response codes:
 400 Bad request
 404 Not Found
 500 Internal Server Error
 503 Service Unavailable
 504 Gateway Timeout

而不是即时通讯目前显示：

在此处输入图片说明

如何使这些代码一个出现在另一个下面？有任何想法吗？？谢谢！

曼格什·帕特

试试这个：

longLabel = 'Error repsonse codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout';
longLabel = longLabel.replace(/\:/g, ":<br>");
$("p").html(longLabel.replace(/\,/g, ":<br>"));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。