尝试将文本和图像添加到 onmouseover

Question

我还是个新手，正在尝试将图片添加到项目描述中。理论上，当用户将鼠标悬停在项目上时，图像和描述将显示在其旁边的列中。我知道我在使用双引号和单引号时做错了什么，但我不确定是什么。

            function gettip(txt)
            {
                document.getElementById('info').innerHTML=txt;
            }
function reset()
{
    document.getElementById('info').innerHTML="Roll over a link for information on the project! "
}


<a href="Homework.html" 
               onmouseover="gettip('<img src='Images/homeworkpreview.jpg'><br><br><b>Due:</b> January 27 <br> <b>Points:</b> 50 <br> <br> <b> Description: </b> <br> Create a Homework page with a table with information about the projects for this semester. This will act as the hub for all of your projects to be linked to.')" 
               onmouseout="reset()"> Homework </a>

Answer 1

转义单引号后，您需要一些 ID 为 info 的元素，例如：

function gettip(txt) {
  document.getElementById("info").innerHTML = txt;
}

function reset() {
  document.getElementById("info").innerHTML =
    "Roll over a link for information on the project! ";
}

<a href="Homework.html" onmouseover="gettip('<img src=\'Images/homeworkpreview.jpg\'><br><br><b>Due:</b> January 27 <br> <b>Points:</b> 50 <br> <br> <b> Description: </b> <br> Create a Homework page with a table with information about the projects for this semester. This will act as the hub for all of your projects to be linked to.')"
  onmouseout="reset()">
      Homework
    </a>
<div id="info"></div>

Answer 2

您可以使用反引号 (`)，这样您就可以在 txt 中使用 single/double 个引号。例如：gettip(`This 'string' can include "quotes"`)

针对您的情况：

onmouseover="gettip(`<img src='Images/homeworkpreview.jpg'><br><br><b>Due:</b> January 27 <br> <b>Points:</b> 50 <br> <br> <b> Description: </b> <br> Create a Homework page with a table with information about the projects for this semester. This will act as the hub for all of your projects to be linked to.`)"

注：this will work for ~95% of users。如果您需要更多报道，您可以按照此处其他答案的指示转义引号。

尝试将文本和图像添加到 onmouseover

Trying to add both text and image to onmouseover

javascript

onmouseover