根据鼠标悬停在不同的 div 上更改 div 内容答案

【问题标题】：Change div content based on mouse hover on different divs根据鼠标悬停在不同的 div 上更改 div 内容
【发布时间】：2015-03-21 18:28:24
【问题描述】：

您好，这个问题是基于之前的问题mouse hover changes text inside separate DIV 由其他人提出的。

只有我相信原始海报要求多次悬停，似乎没有人理解这个要求。我相信我正在寻找他正在寻找的东西，所以我会尽力解释它。

说我有一个 div

<div id="content">Descriptions should appear here</div>

以及位于页面上任何其他位置的链接列表及其自己的描述（只有列表可见，描述不可见）

foo = bar and stuff
apples = a red fruit
keyboard = thing you type with
boat = floats on water

如果有人将鼠标悬停在其中一个链接上，我将如何做到这一点，然后描述将显示在内容 div 中？

感谢所有回复！最后，这就是我的选择：

javascript：

<script>
    function changeContent(description) {
        console.log(description);
        var MyDesc = document.getElementById(description);
        document.getElementById('content').innerHTML = MyDesc.value;
    }
</script>

html:

<div id="content"></div>

<a onmouseover="changeContent('desc1')" href="#">Apples</a>
  <input type="hidden" id="desc1" value="apples are delicious">
<a onmouseover="changeContent('desc2')" href="#">Oranges</a>
  <input type="hidden" id="desc2" value="Oranges are healthy">
<a onmouseover="changeContent('desc3')" href="#">Candy</a>
  <input type="hidden" id="desc3" value="Candy is tasty!">

为描述单独输入让我可以选择在需要时将其电影化。再次感谢所有出色的答案！

【问题讨论】：

标签： javascript html mouseover

【解决方案1】：

此解决方案使用纯 JavaScript。

<div id="content">
    Stuff should be placed here.
</div>

<br/>
<br/>
<br/>
<ul>
    <li onmouseover="hover('Apples are delicious')">Apple</li>
    <li onmouseover="hover('oranges are healthy')">Orange</li>
    <li onmouseover="hover('Candy is the best')">Candy</li>
</ul>

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

【讨论】：

这很完美，我可以很容易地为我的链接操作它。非常感谢！

【解决方案2】：

我会给你最简单的答案和一个例子来说明这是多么容易：

Bootply

HTML：

<div id="content">
  This is some cool default content!
</div>

<div id="foo">Bar and stuff</div>
<div id="apples">A red fruit</div>
<div id="keyboard">Thing you type with</div>
<div id="boat">Floats on water</div>

Javascript：

$("#foo, #apples, #keyboard, #boat").hover(function(e){
  $("#content").text($(this).text());
});

要使此网页成为可行/可用的网页，您还需要做很多工作，但这将为您指明正确的方向。

希望对您有所帮助。

【讨论】：

【解决方案3】：

你会想要使用 onmouseover 事件

http://www.w3schools.com/jsref/event_onmouseover.asp

然后让您编写脚本将“内容”的样式更改为内联显示，然后当他们通过 onmouseout 离开悬停时返回无

【讨论】：

【解决方案4】：

您可以使用 jQuery 并为列表中的每一行注册一个悬停事件。在事件函数中，您可以使用 $(this).text();

访问悬停标签的内容

【讨论】：

【解决方案5】：

你在找这个http://jsfiddle.net/abhiklpm/v6ay0yy6/ 在我关于 mouseout 的示例中，它也会显示旧的 div 内容，如果需要，您可以删除该部分。此外，您可以使用 jquery 事件而不是 hover，例如 mouseenter、mouseover 等

【讨论】：

【解决方案6】：

HTML

<ul>
    <li class="clickable" data-desc="bar and stuff">Fo</li>
    <li class="clickable" data-desc="a red fruit">apples</li>
    <li class="clickable" data-desc="thing you type with">keyboard</li>
    <li class="clickable" data-desc="floats on water">boat</li>
</ul>
<div id="content">Descriptions should appear here</div>

Javascript（需要 jQuery）

$('.clickable').on('click', function () {
    desc = $(this).attr('data-desc'); //get the description
    $('#content').text(desc);
});

在这里摆弄http://jsfiddle.net/jcw6v7Le/

【讨论】：