0 
$(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>
4

1 に答える 1

0

画像タグの不正な形式の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" />

編集

FIDDLEを確認してください

divにdescriptionクラスを追加しました。

また、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;

于 2012-10-01T04:22:38.237 に答える