将鼠标悬停在div上以触发另一个div

Question

这是我到目前为止所拥有的。我想要做的是，当我将鼠标悬停在div book1上时，我希望显示div uploadbutton。我似乎无法弄明白。

<style type="text/css">
  #uploadbutton {
   display:none;
  }
</style>

这是我的div，上面的是我的css风格

<div id="book1">
<?php include 'viewing_display_pic.php'; ?>
</div>

<div id="uploadbutton">
<?php include 'upload.php'; ?>
</div>

Answer 1

您可以使用adjacent sibling selector：

＆＃13;

＆＃13;

#uploadbutton {
  display: none;
}
#book1:hover + #uploadbutton {
  display: block;
}

＆＃13;

<div id="book1">
  some random text
</div>

<div id="uploadbutton">
  some random text
</div>

＆＃13;

＆＃13;

＆＃13;

  

相邻的兄弟组合器由＆＃34;加号＆＃34; （U + 002B，+）   分隔两个简单选择器序列的字符。该   由两个序列表示的元素共享同一个父元素   文档树和第一个序列表示的元素   紧接在第二个元素代表的元素之前。