鼠标悬停在单独的 DIV 中更改文本答案

【问题标题】：Mouseover changes text inside separate DIV鼠标悬停在单独的 DIV 中更改文本
【发布时间】：2010-10-13 04:04:59
【问题描述】：

是否可以通过鼠标悬停在单独的链接上更改单独的 div 内的文本？有人知道在哪里指导我或给我看一个例子吗？

感谢大家的帮助！！

埃里克

【问题讨论】：

标签： mouse

【解决方案1】：

这需要一个简单的javascript来做到这一点

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function changeContent()
    {
        document.getElementById("myDiv").innerHTML='New Content';
    }
  </SCRIPT>
 </HEAD>

 <BODY>
  <div id="myDiv">
    Old Content
  </div>
  <a href="#" onmouseover="changeContent()">Change Div Content</a>
 </BODY>
</HTML>

【讨论】：

如何处理同一内容 DIV 的多个鼠标悬停？
我不确定您所说的多次鼠标悬停是什么意思。如果您的意思是在鼠标移出时恢复为旧文本，则在较低的答案中处理得更好。最好使用 jquery 或任何其他 javascript 框架，这样您就不必处理浏览器的怪癖

【解决方案2】：

这里有一个jquery 的小例子：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
    {
    $(".pass").hover(
      function () {
         $(".change").text("MOUSE HOVER");
        },
        function () {
         $(".change").text("DIV TO CHANGE");
        }
        );
    });
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>

【讨论】：

你将如何添加多个鼠标悬停与不同的对应文本？
多次鼠标悬停是什么意思？！你可以在文档中看到函数 hover 接收到 2 个回调，第一个是当鼠标进入时，第二个是鼠标离开时，所以在第一个回调中你可以做任何你想做的事情！看看文档(api.jquery.com/hover)

【解决方案3】：

您可以使用像 JQuery 这样的 Javascript 库例如：

$('#youranchorid').mouseover(function() {
  $('#yourdivid').html("Your new text");
});

check the API

【讨论】：

你会如何让它回到原始文本？
使用函数 .mouseleave() 结构与 .mousover() 相同，也可以使用 .mousenter() 代替 .mouseover()