Question

<table bgcolor="#C08374" class="nav" align="center" width="1000" height="50">
    <tr>
        <td id="home" width="175" align="center">
            <a href="index.html">Home</a>
        </td>
    </tr>
</table>

默认情况下，我希望表格的背景为红色，但是在有人将鼠标悬停在文字上之后，我希望将单元格的背景更改为图像。到目前为止，我已经使用下面的代码了解它，但它只改变了文本背后的背景而不是整个单元格。我希望能改变整个细胞的背景。

.nav td a {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 18pt;
    text-decoration: none;
    color: black;
}

.nav td:hover a {
    color: gray;
    background-image: url('images/design/background250.png');
}

Answer 1

您可以使用jquery，http://api.jquery.com/addClass/和http://api.jquery.com/removeClass/

这是css

<style>
    .nav td a {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 18pt;
            text-decoration: none;
        color: black;
    }

    .nav td.link_hover {
            background-image: url('images/design/background250.png');
    }

    .nav td.link_hover a{
        color: gray;
    }
</style>

这是jquery脚本

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            //hover
            $(".nav td a").bind("hover", function(){
                $(this).parent("td").addClass("link_hover");
            });

            //mouseout
            $(".nav td a").bind("mouseout", function(){
                $(this).parent("td").removeClass("link_hover");
            });
        });
    </script>

Answer 2

.nav td:hover {
    color: gray;
    background-image: url('images/design/background250.png');
    background-size: 100% 100%;
    background-position: center;
}

Answer 3

你必须添加display：block或display：inline-block，因为标签设置为显示：默认为内联，内联元素不能有宽度，高度，边距或背景图像......

.nav td:hover a {
    color: gray;
    background-image: url('../test.jpg');
    display:inline-block;
}

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<style type="text/css">
.nav td a {
    display:block;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 18pt;
    text-decoration: none;
    color: black;
    height:50px;
    line-height:50px;
}

.nav td:hover > a {
    color: gray;
    background-image: url('images/design/background250.png');
    background-position:left top;   
}
</style>
<body>

<table bgcolor="#C08374" class="nav" align="center" width="1000" height="50" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td id="home" width="175" align="center">
            <a href="index.html">Home</a>
        </td>
    </tr>
</table>

</body>
</html>

Answer 5

所以，我对此的看法略有不同。我用@ LJ-C建议的无序列表。有一些东西可以从中拿走..但首先，这是用JsFiddle做的例子。我想注意一个人不需要在每个li中使用div，但它也是完全有可能。我也构造了这个，所以你不需要任何JS，如果在某些情况下你不知道如何利用脚本知识。但是，如果您了解JS，那么可能更容易利用此处提到的其他人的建议。

现在，为了省解为什么vs时间的长期讨论，首先要知道每个人对此事都有自己的看法。如果您希望决定使用表格与列表，那么此Stack Question非常有见地且充满了信息。

接下来，如果您希望我在JsFiddle中打破代码以便您更好地理解它，请在下面发表评论，我也没有问题。话虽如此，你可以自由地使用这些代码，这样你就可以基本了解这个技巧是如何完全运作的，我实际上鼓励你玩它，直到你终于找到真正适合你网站的完美CSS技巧和什么你想要的。

最后，我想尽可能地提供帮助。我只能输入并尝试解释问题，但为了更好地解决某些问题，CSS Almanac是一个很好用的工具，它显示了示例，甚至提供了基本文档，我仍然从中学到很多东西！其他一些很棒的工具从MDN一直到W3，但就像我说的那样，每个人都有自己喜欢的东西，或者他们喜欢做什么。

作为回顾，我重新构建了以下代码：

<table bgcolor="#C08374" class="nav" align="center" width="1000" height="50">
    <tr>
        <td id="home" width="175" align="center">
            <a href="index.html">Home</a>
        </td>
    </tr>
</table>

看起来更像：

<div id='menubar'>
    <div id='menu'>
        <ul id='a_links'>
            <li><a href="index.html">Main Page</a></li>
        </ul>
    </div>
</div>

所以，即使你没有决定使用我的CSS，你也可以随时使用我的HTML大纲创建一个导航栏，无论你是拿出div还是只使用ul＆amp; amp; lis，完全取决于你。最后一件事就是知道如何显示类似“表格”的东西，这里有link。

作为结尾注释;要有创意，你可以做到这一点:)祝你好运！

用户将鼠标悬停在链接上后如何更改表格单元格的背景？

5 个答案: