Question

我目前正在使用wordpress网站。我希望在登陆页面上的所有链接到不同子页面的不同框。我用表来创建那些盒子。此外，我添加了一个悬停效果，所以当你鼠标悬停在任何一个盒子/桌子上时，背景将变为蓝色，字体变为白色。

每个框/表有一个标题和一行（单列）。标题字体应为蓝色，行字体应为黑色（不应用悬停效果时）。我设法将悬停效果分别放在标题和行上，但现在我需要if else条件，所以每当你鼠标悬停在标题上（标题字体变为白色，背景颜色变为蓝色）时，该行应具有悬停效果也是（字体变为白色，背景颜色变为蓝色），反之亦然。我没有做过多年的编程，所以我对if else条件有点失落。任何人都可以帮助我吗？任何解决方案都将不胜感激。

表格代码：

<div class="table-3"><a title="website" href="website">
<table width="100%">
<thead>
<tr>
<th><hr style="border: 1px solid;" width="30%" align="left">content</th>
</thead>
<tbody><a title="website" href="website">
<td>content</td>
</tr>
</tbody>
</table>
</a>
</div>

悬停效果的代码（对于行来说是相同的）：

.table-3 th:hover{
    background-image: linear-gradient(top, #0E5278 0%, #0E5278 100%);
    background-image: -o-linear-gradient(top, #0E5278 0%, #0E5278 100%);
    background-image: -moz-linear-gradient(top, #0E5278 0%, #0E5278 100%);
    background-image: -webkit-linear-gradient(top, #0E5278 0%, #0E5278 100%);
    background-image: -ms-linear-gradient(top, #0E5278 0%, #0E5278 100%);
    background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #0E5278), color-stop(1, #0E5278) );
    border:1px solid #0E5278;
    font-style:normal;
    text-transform:none;
    color: #ffffff !important;
}

在整个盒子上悬停效果需要什么样的代码（好像它不是标题和行而只是一个盒子）？

Answer 1

由于您缺少显示的信息，我不确定我的问题是否正确，但请小心一点，这是我的小提琴：http://jsfiddle.net/2wWUN/1/

HTML code：

<body>
    <table border="1">
        <thead>
            <tr>
                <td><a href="#">This is the Header</a></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#">some row content</a></td>
            </tr>
        </tbody>
    </table>
</body>

CSS代码：

thead tr{
    color: #328EFD;
}

thead tr:hover a, tr:hover a{
    color:#fff;
    background-color:#328EFD;
}

tr{
    color:#000;
}

Answer 2

如果我正确理解你想要的东西，只需应用：hover to table，根据Joe Marie的回答使用以下CSS：

thead tr a{
    color: #328EFD;
}

table:hover, table:hover a{
    color:#fff;
    background-color:#328EFD;
}

tr a{
    color:#000;
}

使用悬停效果更改表格上的颜色

2 个答案: