0

http://jsfiddle.net/xDaL8/6/が開催場所です。私は 4 つの div を持っています。右側に 1 つの位置がメニュー リンクで、左側に 3 つの div がこの順序で上から下に画像、コンテンツ、さらに表示されます。ポイントがリンクを離れると左側のコンテンツがアクティブなままになるため、「もっと見る」には、右側のリンクでホバーされたものと同じリンクが必要です。右のリンク。それほど混乱していないことを願っています。

`$(document).ready(function() {

    var defaultText  = '.description';
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
        defaultText = $(".description").html();
        $(".description").html($(this).data("description"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
        $(".description").html(defaultText);
});​   <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" data-description="Demo Images Description">
                <a href="#">Anywhere</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button2" data-img="http://demo/images/Banner.jpg"  data-description="Banner Description" >
                <a href="#">ware</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button3" data-img="http://demo/images/Banner.jpg"  data-description="Demand Description" >
                <a href="#">Demand</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button4" data-img="http:http://demo/images/Bans.jpg"  data-description="CMO Description" >
                <a href="#">CM</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button5" data-img="http://demo/images/eat.jpg"  data-description="Key Description" >
                <a href="#">Key</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>

ホバーごとにここにテキスト コンテンツを配置します `

4

1 に答える 1

0

更新された fiddleを確認してください。

あなたが正しくやりたいことを理解していると仮定すると、更新されたコードは次のとおりです。

更新された 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" data-description="Demo Images Description" data-link="http://www.google.com">
          <a href="#">Anywhere</a>
        </li>
      </div>
      <div style="height:20px;">
        <li id="button2" data-img="http://demo/images/Banner.jpg"  data-description="Banner Description" data-link="http://www.yahoo.com">
          <a href="#">ware</a>
        </li>
      </div>
      <div style="height:20px;">
        <li id="button5" data-img="http://demo/images/eat.jpg"  data-description="Key Description" data-link="http://www.bing.com">
          <a href="#">Key</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 class="description" id="Text">put text content here for each hover</div>  
  <div> 
    <a href="#" id="view_more_link" style="color: #000">View More&gt;&gt;</a> </div>
  </div>​
</div>

更新された JavaScript:

$(document).ready(function() {

    var defaultText = $(".description").html();
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
        defaultText = $(".description").html();
        $(".description").html($(this).data("description"));
        $('#view_more_link').prop('href', $(this).data("link"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
        $(".description").html(defaultText);
    });

});
​

リスト項目のデータ プロパティに説明を入れて正しい軌道に乗っていました。data-linkリスト アイテムにプロパティを追加し、そのプロパティを [もっと見る] リンクのプロパティにバインドすることで、同じことを行いましたhref。

于 2012-10-04T21:58:40.983 に答える