0

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

如果可能的话，让我们避免使用 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）来完成这项工作？

任何帮助表示赞赏！

4

2 回答 2

0

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

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

于 2013-06-01T03:47:27.107 回答
0

尝试这个，

脚本

$('.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;
}
于 2013-05-30T05:49:51.430 回答