Поставянето на мишката променя текста в отделен 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="/bg#" 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