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

检查这支笔，我创造了。
没有javascript
http://codepen.io/anon/pen/KpVVmM

ul{
  width:200px;
  display:block;
  position:relative;
}
.description{
  position:absolute;
  top:0;
  left:0;
  width:300px;

  transform:translate(200px,0);   
  border:1px solid #ccc;
  display:none;
}

li:hover > div.description{
  display:block;
}
   <ul>
  <li>Lorem ipsum.<div class='description'>Lorem ipsum dolor sit amet, consectetur.</div></li>
  <li>Maxime, cupiditate.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></li>
  <li>A, ratione.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas.</div></li>
  <li>Asperiores, labore?<div class='description'>Lorem ipsum dolor sit.</div></li>
  <li>Fugit, amet.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusamus?</div></li>
</ul>

也许dl＆gt; dt + dd对你来说是一个更好的语义标记，顺便说一下。 http://www.w3schools.com/tags/tag_dl.asp

Answer 2

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

Codepen与您分道扬 - 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;
}

JavaScript - 为什么我的函数不会持有超过几个字符的长度？

2 个答案: