在鼠标悬停另一个元素时更改div的HTML

Question

我有这样的事情：

<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 all your client details and their history of stays.">
        <img src="<?php echo Yii::app()->theme->BaseUrl ?>/img/icons/1.png">
    </div>
    <div class="span1" title="clients2" desc="Access2 all your client details and their history of stays.">
        <img src="<?php echo Yii::app()->theme->BaseUrl ?>/img/icons/2.png">
    </div>

我有像这样的jquery函数：

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

我希望在baloon-title的鼠标悬停时更改div baloon-desc和span1的内容。我究竟做错了什么？在此先感谢您的帮助。

Answer 1

你显示的代码将工作如果你已经包含了一个版本的jquery.js 和你将你的JS放在一个脚本块中，该块出现在div之后问题或者你把它放在准备好的文件中。

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

演示：http://jsfiddle.net/5w33G/

如果你在'.span1' div之前的一个脚本元素中包含JS（没有文档就绪处理程序）那么当JS代码运行时，该div将不会被解析，所以jQuery将找不到div因此不会绑定鼠标悬停处理程序。

Answer 2

用jQuery包装你的脚本

jQuery(function ($) {

// your code here

});

它应该可以正常工作。