$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
$('.description').text($(this).data('description'));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});
HTML代码:
<div>
<div style="width: 377px; position:relative; left: 395px;">
<ul id="MenuBar1" class="MenuBarHorizontal">
<div style="height:20px;">
<li id="button1" data-img="http://http://demo/images/anne.jpg" width="357" height="241" border="0">
<a href="#">Anywhere</a>
</li>
</div>
<div style="height:20px;">
<li id="button2" data-img="http://demo/images/Banner.jpg">
<a href="#">ware</a>
</li>
</div>
<div style="height:20px;">
<li id="button3" data-img="http://demo/images/Banner.jpg">
<a href="#">Demand</a>
</li>
</div>
<div style="height:20px;">
<li id="button4" data-img="http:http://demo/images/Bans.jpg">
<a href="#">CM</a>
</li>
</div>
<div style="height:20px;">
<li id="button5" data-img="http://demo/images/eat.jpg">
<a href="#">Key</a>
</li>
</div>
</a></li></div>
</ul>
</div>
<div style="width: 357px; position: relative; top: -380px;" id="content">
<img id="back"src="http://demo/images/Banner.jpg"data-original="http://demo/images/Banner.jpg" alt="e.s.t" />
</div>
<div>
<p>put text content here for each hover</p>
</div>
最佳答案
图像标签中的 HTML 格式不正确
<img id="back"src="http://demo/images/Banner.jpg"data-original="http://demo/images/Banner.jpg" alt="e.s.t" />
id 和数据属性之间缺少空格...
<img id="back" src="http://demo/images/Banner.jpg" data-original="http://demo/images/Banner.jpg" alt="e.s.t" />
编辑
我已将描述类添加到 div。
还在 li 标签中添加了 data-description 属性..
检查上面的例子..
已更新
$(document).ready(function() {
var defaultText = '';
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
defaultText = $(".description").text();
$(".description").text($(this).data("description"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
$(".description").text(defaultText);
});
您正在尝试访问仅在第一个函数中具有作用域的 defaultText 变量。尝试在鼠标悬停事件之外声明它。您刚刚遇到了范围界定错误 :D ;
关于jquery, .data() 悬停一个 div 并更改其他两个 div 上的内容和图像 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12667337/