更新

Question

固定

我一直在调整我的css代码的位置和 display 元素，似乎无法弄清楚如何编辑我的代码。我不明白应如何编辑div。我想要的是只允许div的悬停，而不是按钮的盒子大小。但是，当我将鼠标悬停在按钮对齐的水平空间上时，即使没有直接悬停在按钮上，也会显示下拉列表。新手在这里编辑css。请帮帮我。

＆＃13;

#container {
  margin: 0px auto;
  /*
		width: 1815px;
		height: 820px;
		*/
  padding: 100px;
}
/*button style*/

.collegebtn {
width: 100px;
  color: white;
  display: block;
  padding: 25px;
  font-size: 30px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  font-family: 'Play', sans-serif;
  box-shadow: 0 2px 4px 0 rgba(0, 181, 91, 0.74), 0 3px 10px 0 rgba(0, 181, 91, 0.74);
}
/*button effects*/

.collegebtn:hover {
  background-color: #A10F31;
  opacity: 0.6;
}
/*position <div> for the content*/

.listdrop {
width: 100px;
  position: relative;
  display: block;
  margin-right: 40px;
  margin-bottom: 40px;
}
/*the hidden list*/

.listdrop-title {
  display: none;
  position: absolute;
  background-color: #ffffcc;
  max-width: inherit;
  text-align: center;
  z-index: 1;
}
/*the links in the dropdown*/

.listdrop-title a {
  color: black;
  padding: 10px 12px;
  display: block;
  text-decoration: none;
  font-family: 'Century Gothic';
}
/*bgcolor effects of links in dropdown*/

.listdrop-title a:hover {
  background-color: #f1f1f1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*this will show in hovering the titles*/

.listdrop:hover .listdrop-title {
  display: inline;
  text-align: center;
}
/*bgcolor changes on the shown dropdown*/

.listdrop:hover .buttondrop {
  background-color: #d1e0e0;
}

＆＃13;

<body>
  <ul style="list-style: none;">
    <div id="container">
      <p>Welcome to our Collections</p>
      <div class="listdrop">
        <li>
          <button class="collegebtn"><a>Category by Title</a>
          </button>
        </li>
        <div class="listdrop-title">
          <a href="ProdList/SoftSol.html">Software</a>
          <a href="ProdList/HardSol.html">Hardware</a>
          <a href="ProdList/Others.html">Others</a>
        </div>
      </div>
  </ul>
  </div>
</body>

＆＃13;

Answer 1

只需删除标记周围的按钮即可。你不应该嵌套这两个！

所以从void Handler::SqlNotification(const QString &name, QSqlDriver::NotificationSource source, const QVariant &payload){ switch(source){ case QSqlDriver::UnknownSource: qDebug() << "unkown source, name: " << name << "payload:" << payload.toString(); break; case QSqlDriver::SelfSource: qDebug() << "self source, name: " << name << "payload:" << payload.toString(); break; case QSqlDriver::OtherSource: qDebug() << "other source, name: " << name << "payload:" << payload.toString(); break; } }到<button class="collegebtn"><a>Category by Title</a></button>

并且不要忘记<a class="collegebtn">Category by Title</a> href="http://whereever"，否则你将无法在悬停时获得正确的指针。至少<a>应该完成这项工作。

更新

我认为这个问题已经解决了。这是一个很好的简约例子:) https://stackoverflow.com/a/19396291/1841828

如何编辑div：hover属性？

1 个答案:

更新