jquery - 在悬停时识别 CSS 中的 first-child td 和 tr identical-child-td

Question

将我的问题重组为基本答案。

如果可能的话，让我们避免使用 jQuery(我可以用 jQuery 做到这一点，我只是不想让计算机渲染时间变慢)

(这对问题来说不是很重要，但为了引用)

所以，模拟 html:

<table id="prices">
    <tr>
        <td class="clear"></td>
    </tr>

    <tr class="head">
        <td class="clear"></td>
        <td class="head">
            <a href="desktop.html"><h3>Desktop</h3></a>
        </td>
        <td class="head">
            <a href="laptop.html"><h3>Laptop</h3></a>
        </td>
        <td class="head">
            <a href="server.html"><h3>Server</h3></a>
        </td>
    </tr>

    <tr class="price">
        <td class="clear"></td>
        <td class="price">
            <div>
                <div class="price_figure">
                    <a href="contact.html"><span class="price_number">$30</span></a>
                    <span class="price_tenure">per hour</span>
                </div>
            </div>
        </td>
        <td class="price">
            <div class="price">
                <div class="price_figure">
                    <a href="contact.html"><span class="price_number">$30</span></a>
                    <span class="price_tenure">per hour</span>
                </div>
            </div>
        </td>
        <td class="price">
            <div class="price">
                <div class="price_figure">
                    <a href="contact.html"><span class="price_number">$30</span></a>
                    <span class="price_tenure">per hour</span>
                </div>
            </div>
        </td>
    </tr>

    <tr>
        <td class="category">
            <a href="services_hwrep.html">Hardware Repair</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr>
        <td class="category">
            <a href="services_netts.html">Network Troubleshooting</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr class="foot">
        <td div class="clear"></td>
        <td class="foot">
            <div class="footer">
                <a href="contact.html" class="action_button">Contact Us</a>
            </div>
        </td>
        <td class="foot">
            <div class="footer">
                <a href="contact.html" class="action_button">Contact Us</a>
            </div>
        </td>
        <td class="foot">
            <div class="footer">
                <a href="contact.html" class="action_button">Contact Us</a>
            </div>
        </td>
    </tr>
</table>

目前的CSS:

table#prices {
    background: #131313; 
    color: #efefef;
}
table#prices a {
    color: #999;
    font-size:16px;
}
table#prices td {
    border:1px solid #131313;
}
table#prices td:hover a {
    color: #FFF;
    font-size:16px;
}
table#prices a:hover {
    color: #69c;
}
table#prices h3 {
    text-align:center;
    padding-bottom:10px;
}
table#prices img {
    margin:0 auto;
    display:block;
}
table#prices td {
    text-align:center;
    padding-bottom:0px;
    width:210px;
}
table#prices td:first-child {
    background: #222; 
    padding-top:15px;
    text-align:center;
}
table#prices td.category:hover {
    background: linear-gradient(#147, #369);
    padding-top:15px;
    text-align:center;
    margin:1px;
}
table#prices tr.price td {
    background: #222; 
    padding:15px 10px;
    text-align:center;
    border:1px solid #131313;
}
table#prices td.price:hover {
    background: linear-gradient(#147, #369);

}
table#prices .price_number {
    font-size:26px;
    font-weight: bold; 
    display: block;
}
table#prices .price_tenure {
    font-size: 11px; 
}
table#prices td:first-child {
    background: #222; 
    color: #efefef;
    padding:15px;
    margin-right:0;
    border:1px solid #131313;
}
table#prices tr:last-child td:hover {
    background: #131313; 
    border:none;
}

.action_button {
    text-decoration: none; 
    color:#efefef; 
    font-weight: bold; 
    border-radius: 3px; 
    background: linear-gradient(#147, #369); 
    margin:5px 20px;
    font-size: 11px; 
    padding:5px 20px;
    text-transform: uppercase;
}
.action_button:hover {
    background: linear-gradient(#369, #147); 
    border:1px solid #000;
    padding-bottom:-1px;
    color:#333;
}

tr:hover td {
    background:#333;
}
tr td:hover {
    background:#666;
}
td.head:hover {
    background:#131313;
}
td.foot:hover td {
    background:#131313;
}
tr.head:hover td {
    background:#131313;
}
tr.foot:hover td {
    background:#131313;
}
tr:hover td:first-child {
    background: linear-gradient(#147, #369); 
}

.pri_active {
    background-color:#fff;
}
.pri_cat {
    background:linear-gradient(#369, #69c);
}

简单的问题...如果您在实时页面上注意到:

http://www.sinsysonline.com/cameron/nick/repair/price.html

如何通过 CSS 突出显示左栏和顶部价格栏？(在事件复选标记 td 上)。如果将鼠标悬停在左侧或顶部，它会以渐变方式突出显示。有没有一种 CSS 方法可以回溯(td:hover，父 tr td:第一个 child )来完成这项工作？

感谢任何帮助!

Answer 1

试试这个，

脚本

$('.catTr td').not('.category').hover(function(){
    $(this).closest('tr').find('td.category').addClass('blue_hover');
    var index=$(this).index();
    $('tr.price td').eq(index).addClass('blue_hover');
},function(){
    $(this).closest('tr').find('td.category').removeClass('blue_hover');
    var index=$(this).index();
    $('tr.price td').eq(index).removeClass('blue_hover');
});

HTML

<table id="prices">
    <tr>
        <td class="clear"></td>
    </tr>

    <tr class="head">
        <td class="clear"></td>
        <td class="head">
            <a href="desktop.html"><h3>Desktop</h3></a>
        </td>
        <td class="head">
            <a href="laptop.html"><h3>Laptop</h3></a>
        </td>
        <td class="head">
            <a href="server.html"><h3>Server</h3></a>
        </td>
    </tr>

    <tr class="price">
        <td class="clear"></td>
        <td class="price">
            <div>
                <div class="price_figure">
                    <a href="contact.html"><span class="price_number">$30</span></a>
                    <span class="price_tenure">per hour</span>
                </div>
            </div>
        </td>
        <td class="price">
            <div class="price">
                <div class="price_figure">
                    <a href="contact.html"><span class="price_number">$30</span></a>
                    <span class="price_tenure">per hour</span>
                </div>
            </div>
        </td>
        <td class="price">
            <div class="price">
                <div class="price_figure">
                    <a href="contact.html"><span class="price_number">$30</span></a>
                    <span class="price_tenure">per hour</span>
                </div>
            </div>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_hwrep.html">Hardware Repair</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>

    <tr class="catTr">
        <td class="category">
            <a href="services_netts.html">Network Troubleshooting</a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
        <td>
            <a href="services_hwrep.html"><img src="../css/images/check.png" /></a>
        </td>
    </tr>


    <tr class="foot">
        <td div class="clear"></td>
        <td class="foot">
            <div class="footer">
                <a href="contact.html" class="action_button">Contact Us</a>
            </div>
        </td>
        <td class="foot">
            <div class="footer">
                <a href="contact.html" class="action_button">Contact Us</a>
            </div>
        </td>
        <td class="foot">
            <div class="footer">
                <a href="contact.html" class="action_button">Contact Us</a>
            </div>
        </td>
    </tr>
</table>

在您的 CSS

中添加

.blue_hover{
    background: -moz-linear-gradient(#147, #369);
    padding-top:15px;
    text-align:center;
    margin:1px;
}