-2

好的，这是我的问题。我卡了一段时间

我有一张 3x3 的桌子。在那张桌子上，我有 5 张图片；

  • 第一张图片在顶行的中间单元格中，上面写着“家”
  • 第 2、3 和 4 张图像位于中间行
    • 第二张图片在左栏中，上面写着“软件”
    • 第三张图片位于表格中间，显示我的徽标
    • 第 4 张图片在右栏中，上面写着“论坛”
  • 第 5 张图片位于第 3 行中间单元格中，显示“关于”

所以我想保持徽标图像（在表格的中心）显示，直到用户将鼠标悬停在 4 个类别（主页、论坛、软件、关于）之一上。当他们将鼠标悬停在类别上时，中间的图像应该成为代表该特定类别的图像。

例如，如果用户将鼠标悬停在软件图像（左列，中间行）上，则徽标图像将替换为代表软件的图像。

抱歉语言不好，我希望你明白我想做什么

4

2 回答 2

1

这应该让你朝着正确的方向前进。

HTML

<table>
    <tr>
        <td id=""><a href="#"></a></td>
        <td id="home"><a href="#">Home</a></td>
        <td id=""><a href="#"></a></td>
    </tr>
    <tr>
        <td id="software"><a href="#">Software</a></td>
        <td id="logo"><a href="#">Logo</a></td>
        <td id="forum"><a href="#">Forum</a></td>
    </tr>
    <tr>
        <td id=""><a href="#"></a></td>
        <td id="about"><a href="#">About</a></td>
        <td id=""><a href="#"></a></td>
    </tr>
</table>

jQuery

var logoBlock = $("#logo");
$("a").hover(
    function(){
        logoBlock.find("a").text( $(this).text()+" is Hovered" );
    },
    function(){
        logoBlock.find("a").text("Logo");
    }
);

http://jsfiddle.net/daCrosby/MvWYD/

于 2013-09-19T19:07:12.627 回答
0

这是你想做的吗？

jsFiddle here

HTML：

<table id="tbl">
    <tr><td></td><td><img id="hom" src="http://png-2.findicons.com/files/icons/1261/sticker_system/128/home.png"></td><td></td></tr>
    <tr>
        <td>
            <img id="swr" src="https://cdn1.iconfinder.com/data/icons/ecommerce-and-business-icon-set/256/software.png">
        </td>
        <td>
            <img id="lgo" src="http://graph.facebook.com/1671019266/picture?type=large">
        </td>
        <td>
            <img id="frm" src="http://wespenre.com/graphics/forum-icon.png">
        </td>
    </tr>
    <tr id="tr2"><td></td><td><img id="abt" src="http://png-3.findicons.com/files/icons/730/soft/128/info.png"></td><td></td></tr>
</table>

javascript/jQuery:

/*
    See these posts:
    http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery

*/

var img_logo = $('#lgo');
$('img').hover(
    function() {
        var xx = $(this).attr('src');
        img_logo.attr('src', xx);
    },
    function() {
        img_logo.attr('src', "http://graph.facebook.com/1671019266/picture?type=large");
    }
);
于 2013-09-19T18:32:31.170 回答