使用JavaScript onMouseOver显示输入字段

Question

我对如何使用JavaScript onMouseOver函数显示悬停效果存在疑问？ 如果您想观看实时示例，请访问notion.com日历部分。由于悬停时的想法类似，因此悬停日历框时会出现添加按钮。

notion.com的图片

我的版本：（我不知道onMouseOver发生了什么情况）

我的代码：

if (counter == day){
htmlContent += "<div class='blank' onMouseOver='<input type='file'>'' "+ "onMouseOut='<input type='file'>'"+ counter + "</div>";

}else{

Answer 1

您不能在onMouseOver属性中放置HTML标记。相反，它必须包含javascript代码，例如，对全局范围内的命名函数的调用或匿名函数。

此外，您的代码中包含不正确的嵌套引号，这就是为什么浏览器未按照您期望的方式呈现它的原因。

Answer 2

您已在onMouseOver属性中添加了HTML，但需要使用JavaScript代码。 如下更改代码，

function appendInput(e){
    var div = document.createElement('div');
    div.innerHTML = '<input type="file"/>';
    e.target.appendChild(div.firstChild);
}
if (counter == day){
     htmlContent += "<div class='blank' onMouseOver='appendInput(event)'>"+counter+"</div>";
}