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 に答える