0

http://jsfiddle.net/xDaL8/6/是它举行的地方。我有四个 div，右边的一个位置是菜单链接，左边的 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

查看更新的小提琴。

假设我理解您想要正确执行的操作，这里是更新后的代码：

更新的 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 回答