CODEWITHSUNDEEP
javascripthtmlmouse
Erik
Erik

Reputation: 5791

Mouseover changes text inside separate DIV

Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?

Upvotes: 1

Views: 9133

Answers (3)

Thiago Diniz
Thiago Diniz

Reputation: 3121

Here an small example with 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>

Upvotes: 2

mklfarha
mklfarha

Reputation: 993

You could use a Javascript library like JQuery for example:

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

check the API

Upvotes: 0

Gaurav Saxena
Gaurav Saxena

Reputation: 4297

It takes a simple javascript to do this

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

Upvotes: 3

Related Questions