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的帮助，为相邻的行或一个单元设置动画：{/ 1}：

tr:hover + tr td

Quick and messy example fiddle with your code example

使用CSS3无法将鼠标悬停在单元格上并为另一行的单元格实现效果！选择者等级4有determine the Subject of a selector的提案，您可以获得更多的灵活性（但我认为这种情况仍然不起作用）。

<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，最后“选择”子元素{{1} }。

将鼠标悬停在另一个单元格上时，更改背景颜色（仅限css）

2 个答案: