Question

我希望在CSS上悬停在锚标签上时显示div。这是我的代码，但不起作用。另外我想通过CSS显示慢动作的div。

#shoow {
  display: none;
}
#hoverMe:hover #shoow {
  display: block;
}

<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width: 650px; height: 100px; background-color: blue;"></td>
  </tr>
</table>

Answer 1

您需要将第二个选择器更改为：

#hoverMe:hover + table #shoow {
  display: block;
}

你现在拥有的#hoverMe:hover #shoow试图寻找一个ID为shoow的元素作为一个ID为hoverMe的元素的descandant，它不是。但是，如果您使用相邻的兄弟选择器（+）或兄弟选择器（~），它将起作用。

＆＃13;

#shoow {
  display: none;
}
#hoverMe:hover + table #shoow {
  display: block;
}

＆＃13;

<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width:650px;height:100px;background-color:blue;"></td>
  </tr>
</table>

＆＃13;

Answer 2

你不能在显示属性上执行css转换，因为它要么打开要么关闭，要使它更慢，只需在转换属性中的s之前添加更多。

#shoow {
  . . .
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
#hoverMe:hover + table #shoow{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

<a href="#" id="hoverMe">ShowDetails</a>
<table>
  <tr>
    <td id="shoow" style="width:650px;height:100px;background-color:blue;"></td>
  </tr>
</table>

我希望在css上悬停在锚标签上时显示div

2 个答案: