用css連接兩個字段之間的懸停效果

Question

我試圖改變字段的風格時，在另一個字段hoving。這工作正常，當我使用錨標籤，但與表標籤它似乎不工作？ 這個版本的作品：

<p>Hover over 1 and 3 gets styled.</p> 
<a id="one">1</a> 
<a id="two">2</a> 
<a id="three">3</a> 

與CSS

#one:hover ~ #three{ 
    background-color: black; 
    color: white; 
} 

現在我想獲得相同的桌子：

<table> 
    <tr align="center"> 
     <td> 
     <a id="four"> 
      4 
     </a> 
     </td> 
    </tr> 
    <tr align="center"> 
     <td> 
     <a id="five"> 
      5 
     </a> 
     </td> 
    </tr> 
</table> 

和CSS

#five:hover ~ #four{ 
    background-color: black; 
    color: white; 
} 

但是桌子不在這裏工作了......是小提琴

https://jsfiddle.net/a3y52/1044/

Answer 1

需要Javascript，或者更好的jQuery來做到這一點：

在腳本

$(document).ready(function() { 
    $("#five").hover(
     function() { 
     $('#four').addClass("overstate"); 
     }, function() { 
     $('#four').removeClass("overstate"); 
     } 
    ); 
}); 

在你的CSS：

#five:hover { 
background-color: black; 
color: white; 
} 

.overstate { 
background-color: black; 
color: white; 
} 

Answer 2

如果您將添加到將工作的CSS

#one:hover ~ #three{ 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
a#five:hover{ 
 
    background-color: black; 
 
    color: white; 
 
} 
 
a#four:hover{ 
 
    background-color: black; 
 
    color: white; 
 
}

<table> 
 
    <tr align="center"> 
 
     <td> 
 
     <a id="four"> 
 
      4 
 
     </a> 
 
     </td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td> 
 
     <a id="five"> 
 
      5 
 
     </a> 
 
     </td> 
 
    </tr> 
 
</table>