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，parent tr td：first child）以使其工作？

感谢任何帮助！

Answer 1

试试这个，

<强> SCRIPT

$('.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;
}

Answer 2

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 id="priceRow">
        <td class="clear"></td>
        <td class="price">
            <h2>Testing</h2>
        </td>
        <td class="price">
            <h2>Testing</h2>
        </td>
        <td class="price">
            <h2>Testing</h2>
        </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="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="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="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">
                <a href="contact.html" class="action_button">Contact Us</a>
        </td>
        <td class="foot">
                <a href="contact.html" class="action_button">Contact Us</a>
        </td>
        <td class="foot">
                <a href="contact.html" class="action_button">Contact Us</a>
        </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;
}
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.category {
    background: #222; 
    color: #efefef;
    padding:15px;
    margin-right:0;
    border:1px solid #131313;
}
table#prices td.category:hover,
table#prices td.category_hover {
    background: linear-gradient(#147, #369);
    padding-top:15px;
    text-align:center;
}


table#prices tr#priceRow td.price {
    background: #222; 
    padding:15px 10px;
    text-align:center;
    border:1px solid #131313;
}

table#prices tr#priceRow td:hover,
table#prices tr#priceRow td.price_hover {
    background: linear-gradient(#147, #369);
    padding:15px 10px;
    text-align:center;
    border:1px solid #131313;
}


table#prices .price_number {
    font-size:26px;
    font-weight: bold; 
    display: block;
}
table#prices .price_tenure {
    font-size: 11px; 
}

table#prices tr:last-child td:hover {
    background: #131313; 
    border:none;
}
        tr:hover td {
    background:#333;
}

tr td:hover {
    background:#666;

}

tr.head:hover td {
    background:#131313;
}
tr.foot:hover td {
    background:#131313;
}

.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.foot td {
    padding-top:25px;
}
.vertFilt {
    background:#333;
}

jQuery的：

<script>
(function() { 

    $('tr.catTr td').not('.category').hover(function(){

        var priceSel = $(this).index();

        $('tr#priceRow td').eq(priceSel).addClass('price_hover');
        $('tr.catTr td').eq(priceSel).addClass('vertFilt');

        $(this).closest('tr').find('td.category').addClass('category_hover');

    },function(){

        var priceSel = $(this).index();

        $('tr#priceRow td').eq(priceSel).removeClass('price_hover');
        $('tr.catTr td').eq(priceSel).removeClass('vertFilt');

        $(this).closest('tr').find('td.category').removeClass('category_hover');

    });

})();
</script>

问题解决了。

直播链接： www.sinsysonline.com/cameron/nick/repair/price.html

现在，如何在列中突出显示每个等效的孩子......

在悬停时识别CSS中的第一个孩子td和tr same-child-td

2 个答案: