Question

当我在另一个场地上躲避时，我正试图改变场地的风格。当我使用锚标签时这很好用，但是使用表标签它似乎不起作用？这个版本有效：

<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>

用css链接两个字段之间的悬停效果

2 个答案: