javascript 根据鼠标悬停在不同 div 上更改 div 内容

Change div content based on mouse hover on different divs

提问by Dal

Hi this question is sort of building off of this previous question mouse hover changes text inside separate DIVasked by someone else.

嗨，这个问题是建立在上一个问题的基础上的，鼠标悬停会更改其他人询问的单独 DIV 内的文本。

Only I believe the original poster was asking for multiple hovers and no one seemed to understand the request.. I believe I'm looking for what he was looking for so i'll try to explain it best a I can.

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

say I have a div

说我有一个 div

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

and a list of links positioned anywhere else on the page with it's own descriptions (only the list is visible not the descriptions)

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

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

How would I make it so that if someone hovered over one of the links, the description would then be shown in the content div?

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

---

---

Thanks for all the replies! In the end, this is what I went with:

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

javascript:

javascript:

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

html:

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!">

having a separate input for the description leaves me the option to movie it around if need be. Thanks again for all the great answers!

如果需要，为描述单独输入可以让我选择将其播放。再次感谢所有伟大的答案！

回答by indubitablee

this solution uses pure javascript.

此解决方案使用纯 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>

回答by Tim Lewis

I'll give you the simplest of answers and an example to show how easy this is:

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

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:

Javascript：

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

There's a lot more you need to do to make this a viable/useable webpage, but this will point you in the right direction.

要使其成为一个可行/可用的网页，您还需要做很多事情，但这将为您指明正确的方向。

Hope that helps.

希望有帮助。

回答by Dan

You'll want to use the onmouseover Event

你会想要使用 onmouseover 事件

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

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

And then have you script change the style of "content" to display inline, and then back to none when they leave the hover with onmouseout

然后你有脚本改变“内容”的样式以显示内联，然后当他们用 onmouseout 离开悬停时回到无

回答by Sebastian Kaupper

You could use jQuery and register a hover event for every line in your list. In the event function you would be able to access the content of the hovered tag with $(this).text();

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

回答by abhiklpm

Are you looking for this http://jsfiddle.net/abhiklpm/v6ay0yy6/In my example on mouseout it will display the old div content also, you can remove that part if needed. Also instead of hoveryou could use jquery events like mouseenter, mouseoveretc

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

回答by Sherif

HTML

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 Required)

Javascript（需要jQuery）

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

fiddle here http://jsfiddle.net/jcw6v7Le/

在这里小提琴http://jsfiddle.net/jcw6v7Le/