如何在hover触发显示的提示框内添加图片？附现有代码求实现方案

你现有的JS逻辑是控制整个#mensaje_frase0容器的显示和隐藏，因此只需要将图片插入该容器内部，就会自动跟随提示框、文本一同显隐，不需要修改原有JS代码，仅需调整CSS和HTML部分即可：

• 调整提示框的高度设置：原有CSS里写死了height:230px，加图片后会出现内容溢出，建议改成min-height:230px让容器高度自适应内容，也可以固定图片高度适配原有容器高度。
• 在提示框容器内插入图片标签：按需放在文本的上方或下方，可额外给图片加样式控制大小、边距。

修改后的完整代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="mihojadeestilosTSlyrics.css"/>
<script src="jQueryAssets/jquery-1.11.1.min.js"></script>   
    
<script>    
    
    $(document).ready(function(){   
        $("#mensaje_frase0").hide();
        $("#frase0").hover(mensaje_on0, mensaje_off0);
    });

    function mensaje_on0(){
        $("#mensaje_frase0").show();
    }
    
    function mensaje_off0(){
        $("#mensaje_frase0").hide();
    }
    
</script>

</head>

<style> 
    
body
{
    background:url("../imagenes/speaknow/longlive.jpg"); /*背景图*/
    background-repeat:repeat-y;
    background-position:120% 0%;
        
}   
    
    #mensaje_frase0{
        position: fixed;  /*固定位置，滚动页面也不会偏移*/
        left: 625px;
        top: 170px;   /*距离可视区域顶部的距离*/
        width: 500px;  /*提示框宽度*/
        min-height: 230px; /* 原固定高度改为最小高度，适配图片内容 */
        background-color: #D7CFDA;
        font-size: 23px;
        padding: 25px;   /*内边距，控制文本和容器边框的距离*/
        padding-top: 40px;
        border: 2px solid #00F;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
        text-align: center;
    }   
    /* 可选样式：统一控制提示框内图片的显示效果，避免超出容器 */
    #mensaje_frase0 img{
        margin-top: 15px;
        max-width: 100%;
        height: auto;
    }
    
</style>    
    
<body>
    
<div id="mensaje_frase0">
    这是提示框内的文本，我也想在这里加一张图
    <!-- 替换src为你实际的图片路径即可 -->
    <img src="../imagenes/你的配图路径.jpg" alt="提示框配图">
</div>
    
    <h1><span id="frase0">Long Live</span></h1>

</body>
</html>

内容的提问来源于stack exchange，提问作者danistor_m