JavaScript - 为什么我的函数不能容纳超过几个字符的内容？

Question

<script>
    function hover(description) {
        console.log(description);
        document.getElementById('pricehover').innerHTML = description;
    }
</script>

我正在使用上面的脚本创建一个列表，其中提供有关出现在列表右侧的悬停信息。我在 HTML 内的列表项上使用以下内容。

<li class="pricegrid" onmouseover="hover('<h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p>')">Pedicure Behandling</li>

并且描述被添加到下面的div

<div id="pricehover">Hover over the items to the left to see the price and description.
</div>

我的问题是，当我想要(如果可能的话)使用整页的描述(包括图像)来完全设计 div 内容时，我的描述不能包含多个字符。谁能解释为什么这不起作用或不可能，也许给我一种方法来做我想做的事？

谢谢。

编辑:我在这里做了一支笔。 http://codepen.io/anon/pen/YXwwag

Answer 1

您可以将要在 li 元素本身内显示的内容(任何 HTML 标记)隐藏在隐藏的 div 中，然后在悬停时将其交换到右侧的 div 中。

Codepen 从你的 fork - http://codepen.io/anon/pen/doGXeV

HTML(更改li)

<li class="pricegrid" onmouseover="hover(this)">Pedicure Behandling<div><h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p></div></li>

JavaScript(更改悬停)

function hover(t) {
    document.getElementById('pricehover').innerHTML = t.childNodes[1].innerHTML;
}

CSS(隐藏类) - 您也可以将其添加到 li 内部 div 的内联样式中，但这会很困惑。

.pricegrid > div
{
  display: none;
}