Наведение мыши изменяет текст внутри отдельного DIV

Можно ли изменить текст внутри отдельного div при наведении курсора мыши на отдельную ссылку? Кто-нибудь знает, куда меня направить или показать пример?

Спасибо за вашу помощь!!

Эрик


mouse
person Erik    schedule 13.10.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Для этого нужен простой 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>
person Gaurav Saxena    schedule 13.10.2010
comment
Как мне обработать несколько наведений мыши для одного и того же содержимого DIV? - person Erik; 13.10.2010
comment
Я не уверен, что вы подразумеваете под несколькими наведениями мыши. В случае, если вы имеете в виду возврат к старому тексту при перемещении мыши, с этим лучше справились в более низких ответах. Лучше использовать jquery или любой другой javascript-фреймворк, чтобы не пришлось разбираться с причудами браузера - person Gaurav Saxena; 13.10.2010

arrow_upward
2
arrow_downward

Вот небольшой пример с 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>
person Thiago Diniz    schedule 13.10.2010
comment
Как бы вы добавили несколько наведений мыши с разными соответствующими текстами? - person Erik; 13.10.2010
comment
что вы имеете в виду о множественных наведениях мыши?! вы можете видеть в документах, что функция hover получает 2 обратных вызова, первый - когда мышь вводит второй, когда мышь уходит, поэтому в первом обратном вызове вы можете делать все, что хотите! загляните в документы (api.jquery.com/hover) - person Thiago Diniz; 13.10.2010

arrow_upward
0
arrow_downward

Вы можете использовать библиотеку Javascript, такую ​​как JQuery, например:

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

проверьте API

person mklfarha    schedule 13.10.2010
comment
Как бы вы вернули его к исходному тексту? - person Erik; 13.10.2010
comment
используя функцию .mouseleave(), она имеет ту же структуру, что и .mousover(), вы также можете использовать .mousenter() вместо .mouseover() - person mklfarha; 13.10.2010