將鼠標懸停在另一個單元格上時更改背景色（僅CSS）

Question

我嘗試閱讀此書，並使其正常工作，但無法在一個單元格上獲得懸停效果以更改另一單元格的背景色。 有什么建議么？

CSS

.frontpagetabellskraddarsy {
    background-color: #F8F8F8;
    border: 1px solid #DDDDDD;
    border-collapse: separate;
    border-radius: 4px;
    padding: 15px; }

.frontpagecelltextskraddarsy {
    background-color: #FFFFFF;
    padding-top: 5px;
    text-align: center;
}

.frontpagecellbildskraddarsy:hover .frontpagecelltextskraddarsy
{
    background-color: #289CDD;
    color: #FFFFFF;
}

HTML

<table class="frontpagetabellskraddarsy" style="background-color: #f8f8f8;" cellspacing="20">
    <tbody>
        <tr>
           <td style="text-align: center; background-color: #f8f8f8;" colspan="3" width="33%">[separator headline="h2" title="Skräddarsy din drömresa"]</td>
       </tr>
        <tr>
            <td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecellbildskraddarsy"><img alt="" src="http://media.baliexperten.se/2014/01/skraddarsypaket.png" class="frontpageresepaketbildskraddarsy"></td>
       </tr>
       <tr>
           <td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecelltextskraddarsy"><strong>SKRÄDDARSY DIN DRÖMRESA </strong>
Vi hjälper dig att skräddarsy just din drömresa till Bali
           </td>
    </tbody>
</table>

Answer 1

<style type="text/css">
        #hoverDiv, #otherDiv {
            width: 200px;
            margin: 5px;
            float: left;
            height: 30px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        #hoverDiv:hover + #otherDiv {
            background: #9ce;
        }
    </style>

    <div id="hoverDiv">
        Hover me!
    </div>

    <div id="otherDiv">
        My color will change :)
    </div>

Answer 2

您不能通過任意標記來實現。 您唯一的選擇是捕獲懸停在表格行tr上的懸停，然后在adjacent sibling combinator幫助下，對相鄰行或單元格（如果是單元格）進行動畫處理：

tr:hover + tr td

快速且凌亂的示例擺弄着您的代碼示例

在CSS3上，無法將鼠標懸停在單元格上並為另一行的單元格實現效果！ 選擇器級別4提出了確定選擇器主題的建議，您可以在其中獲得更大的靈活性（但我認為這種情況仍然行不通）。

<tr id="one">
   <td></td>   // #one td:hover
</tr>
<tr id="two">
   <td></td>   // #two td
</tr>

有人認為類似#one td:hover + #two td可能會起作用，但是，會考慮選擇器第一部分中最后一個元素的上下文。 一旦進入#one td單元格級別，就無法向后退一步來選擇同級+ #two 。

#one:hover + #two td起作用，因為您捕獲了#one上的懸停，然后遍歷下一行+ #two ，最后最終“選擇”子元素td 。