jquery - Change the HTML of a div on mouseover of another element -

i have this:

<div class="baloon">     <div class="baloon-title">chage title</div>     <div class="baloon-desc">change description</div> </div> <div class="row">     <div class="span1" title="clients" desc="access client details , history of stays.">         <img src="<?php echo yii::app()->theme->baseurl ?>/img/icons/1.png">     </div>     <div class="span1" title="clients2" desc="access2 client details , history of stays.">         <img src="<?php echo yii::app()->theme->baseurl ?>/img/icons/2.png">     </div> 

and have jquery function this:

$('.span1').mouseover(function(){     title = $(this).attr("title");     desc = $(this).attr("desc");     $('.baloon-title').html(title);     $('.baloon-desc').html(desc); }); 

i want change content of div baloon-title , baloon-desc on mouseover of span1. doing wrong? in advance help.

the code you've shown work if have included version of jquery.js and put js in script block appears after divs in question or put in document ready.

$(document).ready(function() {     $('.span1').mouseover(function(){        title = $(this).attr("title");        desc = $(this).attr("desc");        $('.baloon-title').html(title);        $('.baloon-desc').html(desc);     }); }); 

demo: http://jsfiddle.net/5w33g/

if included js in script element before '.span1' div (without document ready handler) div won't have been parsed yet when js code runs jquery won't find div , won't bind mouseover handler.