Question

嗨，这个问题有点像其他人提出的上一个问题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!">

为描述提供单独的输入让我可以选择在需要时将其电影放映。再次感谢所有伟大的答案！

Answer 1

此解决方案使用纯JavaScript。

＆＃13;

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

＆＃13;

Answer 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());
});

为了使这个网站成为可行/可用的网页，你需要做更多的事情，但这会指出你正确的方向。

希望有所帮助。

Answer 3

您将要使用onmouseover事件

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

然后让脚本更改“内容”的样式以显示内联，然后当他们使用onmouseout离开鼠标时返回无

Answer 4

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

访问悬停标记的内容

Answer 5

您是否在寻找http://jsfiddle.net/abhiklpm/v6ay0yy6/ 在我的mouseout示例中，它还会显示旧的div内容，如果需要，您可以删除该部分。也可以使用hover，mouseenter等jquery事件代替mouseover

Answer 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/

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

6 个答案: