html - 将鼠标悬停在 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 :

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

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

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

The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.