0

对不起，新手的问题，但我要放弃在这个问题上花了一整天的时间......我已经在这个论坛上搜索了几个小时，但仍然无法让事情正常工作。

有人可以帮我解决以下问题的 CSS 解决方案吗？

基本上，我有一个带有图像背景和文本链接的表格单元格。我需要将鼠标悬停在此表格单元格上同时更改图像和链接颜色。我繁琐的代码看起来像这样：

<table>
  <tr>
    <td width="160" height="36" align="center" valign="middle" class="menuitem1">
       <a href="http://www.samplesite.com">About us</a>
    </td>
  </tr>
</table>`

然后我在一个 CSS 文件中尝试了所有这些：

.menuitem1 {
   border-right-width: 1px;
   border-right-style: solid;   
   border-right-color: #000;
   background-image: url("images/sample.png");
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 17px;
}
.menuitem1 a:link{
   display: block;
   text-decoration: none;
   color: #fff;
}
.menuitem1 a:visited {
   text-decoration: none;
   color: #fff;
}
.menuitem1:hover {
   text-decoration: none;
   background-image: url("images/sample2.png");
   background-repeat: no-repeat;
   background-position: left;
   color: #000;
}
.menuitem1 a:hover {
   text-decoration: none;
   color: #000;
}
.menuitem1 a:active{
   color: #000;
}

问题是文本链接不遵循block属性。因此，文本颜色仅在鼠标悬停在其上时才会更改，而不是在单元格的其余部分上。添加width: 100%到.menuitem1 a仍然留17px在左侧 ( padding-left) 上，而不是在块中。更糟糕的是，height: 100%它没有任何效果，并且以 px 为单位的固定高度将文本垂直对齐在顶部，而无法更改它。

有趣的是，如果我在单元格中没有超链接并且只有文本，那么这段简单的代码就足以让一切都像梦一样工作：

.menuitem1:hover {
   text-decoration: none;
   background-image: url("images/sample2.png");
   background-repeat: no-repeat;
   background-position: left;
   color: #000;
}

对于添加链接后出现的问题，难道没有这样简单的解决方案吗？

非常感谢您提前。

4

1 回答 1

1

许多初学 javascript 程序员最初没有意识到的是，任何选择器列表都可以串在一起形成新的选择器。因此，要更改背景图像，您可以正确放置：

.menuitem1:hover {
    background-image: url("images/sample2.png");
    background-repeat: no-repeat;
    background-position: left;

但是要选择a元素，您应该使用以下格式：

.menuitem1:hover a {
    color: #000;
    text-decoration: none;
    ...
}

希望这可以帮助！

于 2013-03-10T21:52:23.970 回答