[英]Change background-color for one cell when hovering over another (Only css)
I have tried to read up on this and have gooten it to work before but can't get the hover-effect on one cell to change the background-color of another cell. 我尝试阅读此书,并使其正常工作,但无法在一个单元格上获得悬停效果以更改另一单元格的背景色。 Any suggestions?
有什么建议么?
CSS 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 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>
<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>
You cannot achieve this with arbitrary markup. 您不能通过任意标记来实现。 You only option is to capture the hover on a tablerow
tr
and then animate either the adjacent row or one if it's cells via help of the adjacent sibling combinator
: 您唯一的选择是捕获悬停在表格行
tr
上的悬停,然后在adjacent sibling combinator
帮助下,对相邻行或单元格(如果是单元格)进行动画处理:
tr:hover + tr td
Quick and messy example fiddle with your code example 快速且凌乱的示例摆弄着您的代码示例
Hovering over a cell and achieve an effect for a cell of another row is not possible with CSS3! 在CSS3上,无法将鼠标悬停在单元格上并为另一行的单元格实现效果! Selectors Level 4 have a proposal to determine the Subject of a selector , where you get more flexibility (but I think this case still would not work).
选择器级别4提出了确定选择器主题的建议,您可以在其中获得更大的灵活性(但我认为这种情况仍然行不通)。
<tr id="one">
<td></td> // #one td:hover
</tr>
<tr id="two">
<td></td> // #two td
</tr>
One thinks something like #one td:hover + #two td
might work, however, the context of the last element in the first part of the selector is considered. 有人认为类似
#one td:hover + #two td
可能会起作用,但是,会考虑选择器第一部分中最后一个元素的上下文。 Once you are on cell level #one td
you cannot take a step backwards to select the sibling + #two
. 一旦进入
#one td
单元格级别,就无法向后退一步来选择同级+ #two
。
#one:hover + #two td
on the other hand works, because you capture the hover on #one
, then traverse to the next row + #two
and then finally "select" the child element td
. #one:hover + #two td
起作用,因为您捕获了#one
上的悬停,然后遍历下一行+ #two
,最后最终“选择”子元素td
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.