HTML\CSS：使用 CSS 更改悬停状态的单元格背景
看看这个 jsFIDDLE 示例
我想用 CSS 更改悬停状态的单元格背景颜色..可以通过 JavaScript 实现，但我想用 CSS 来实现...另外我希望整个单元格充当链接如何做到这一点
look at this jsFIDDLE sample
i want to change the cell background color for hover state with CSS.. it can be attained through JavaScript but i want to do it with CSS... plus i want the whole cell to act as a link how to do it
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您需要考虑以下几点：
不要混合 CSS 和展示性 HTML，否则会变得非常混乱。颜色（文本、背景、边框）、大小、对齐方式以及与网站外观有关的任何内容都属于 CSS。
出于布局目的，尽量避免使用表格。对于初学者来说，它们可能看起来更容易，但这是一种过时的技术。
在 CSS 中，您需要将
:hover规则移到:visited规则之前。由于这两个规则具有相同的特异性，因此具有优先权和已访问链接的第一个规则（当前为:visited）将永远不会应用悬停规则。您无需为每条规则重复 CSS 样式。由于继承和级联，许多样式会自动应用于子元素。
您需要在链接而不是表格单元格上设置背景颜色，然后您可以在悬停时更改背景颜色，就像您已经使用文本颜色一样。
提供链接
display: block将使链接延伸到其包含块的整个宽度，因为这是块元素的默认行为。以下是使用“干净”CSS 和 HTML 的相同布局的示例：
http:// www.jsfiddle.net/QShRF/5/
There are several things you need to take into consideration:
Don't mix CSS and presentational HTML otherwise it will get very confusing. Colors (for text, background, borders), sizes, alignment, anything that has to do with the look of the site belong into the CSS.
Try to avoid tables for layout purposes. They may seem easier as a beginner, but it's an outdated technique.
In the CSS you need to move the
:hoverrule before:visitedrule. Since both rules have the same specificity the first rule (currently:visited) with take preference and visited links will never have the hover rule applied to.You don't need to repeat styles in CSS for every rule. Due to inheritance and cascading many styles are automatically applied to child elements.
You need to set the background colors on the links instead of the table cells, then you can change the background color on hover just as you already are with the text color.
Giving the links
display: blockwill have the links stretch over the whole width of it's containing block, since that is the default behaviour of block elements.Here is an example how the same layout with "clean" CSS and HTML should look like:
http://www.jsfiddle.net/QShRF/5/
为菜单的
table标记指定一个 id，然后：实际上，除了数据表之外，您不应该将表用于任何其他用途，因为它们很难维护并且会破坏语义。
Give the menu's
tabletag an id and then:Really, though, you shouldn't be using tables for anything other than data tables, they are hard to maintain and break semantics.
.menu_links:link { display: block }使整个单元格充当链接（不过您需要添加一点边距/填充）。然后您只需添加
.menu_links:hover { background: #123123 }即可为背景着色。另外，我可以建议您在样式表中设置所有表格的样式。
非常过时，使得网站的维护变得非常困难。.menu_links:link { display: block }Makes the entire cell act as a link (you'll need to add a little margin/padding though). Then you can just add
.menu_links:hover { background: #123123 }to colorize the background.Also, I can advise you to set all the table's styles in a stylesheet.
<table bordercolor="red" bgcolor="#ffffff">is very outdated and makes maintenance on the site a hell.