Question

我正在尝试制作一个从图像中删除的下拉菜单，但我似乎无法使其正常工作。我该如何定位悬停？因为我尝试的一切都不起作用。我如何尝试启动悬停效果显示在CSS的末尾。

＆＃13;

.area-left {
  float: left;
}

.menu-icon {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.menu-icon hr {
  border: 2px solid #A5CF4C;
  border-radius: 100px;
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 3px;
}

.area-left .menu li:hover {
  background-color: rgba(165, 207, 76, 0.4);
}

.logo img {
  vertical-align: middle;
  margin-top: 2px;
}

.sub-menu ul {
  background-color: rgba(255, 255, 255, 0.8);
}

.sub-menu li {
  border: 1px solid green;
  padding: 0px 5px;
}

.sub-menu .menu li:first-child {
  margin-top: 3px;
}

.sub-menu ul li {
  display: none;
}

.logo img:hover .sub-menu ul li {
  display: block;
}

＆＃13;

<div class="area-left">
  <ul id="htc-menu" class="parent-menu">
    <li class="logo ico-container">
      <div class="menu-icon">
        <hr/>
        <hr/>
        <hr/>
      </div><img src="images/logo.png" alt="HTC Logo"></li>
    <li class="sub-menu">
      <ul class="menu">
        <li><a href="http://www.htc.com/us/smartphones-learn/">smartphones</a></li>
        <li><a href="http://www.htc.com/us/accessories/">accessories</a></li>
        <li><a href="https://www.vive.com/us/">virtual reality</a></li>
        <li><a href="http://www.htc.com/us/fitness/ua-healthbox/">fitness</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

您作为void MainShowTabWidget::showNewLayoutTest() { ShowRequisitePropsWidget * propsWidget = new ShowRequisitePropsWidget; TimelineWidget * timelineWidget = new TimelineWidget; Waveform * waveform = new Waveform(this); //these 3 are my custom widgets QHBoxLayout * actorLayout = new QHBoxLayout(this); //for a single item actorLayout - > addWidget(waveform); setLayout(actorLayout); QHBoxLayout * hl = new QHBoxLayout(); hl - > addSpacerItem(new QSpacerItem(10, 1, QSizePolicy::Expanding, QSizePolicy::Fixed)); windowLayout - > addItem(actorLayout); windowLayout - > addLayout(actorLayout); //horizontal layout actorsMap.insert(showObjectsCounter, actorLayout); showObjectsCounter++; // setLayout(windowLayout); // repaint(); }的孩子尝试访问.sub-menu，尽管他们是彼此的兄弟姐妹。

尝试：

.logo

或者只是：

.logo:hover + .sub-menu ul li  {
    display: block;
}

Answer 2

试试这个：）

我故意没有使用相邻的CSS选择器，因为一旦你的鼠标离开菜单图标，菜单就会再次消失，使其无益。因此，您希望定位父元素的悬停状态，以便在鼠标从徽标移动到刚出现的菜单时，菜单仍然可见。

＆＃13;

.area-left {
  float: left;
}

.menu-icon {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 5px;
}

.menu-icon hr {
  border: 2px solid #A5CF4C;
  border-radius: 100px;
  margin-top: 3px;
  margin-bottom: 4px;
  margin-right: 5px;
  margin-left: 3px;
}

.area-left .menu li:hover {
  background-color: rgba(165, 207, 76, 0.4);
}

.logo img {
  vertical-align: middle;
  margin-top: 2px;
}

.sub-menu ul {
  background-color: rgba(255, 255, 255, 0.8);
}

.sub-menu li {
  border: 1px solid green;
  padding: 0px 5px;
}

.sub-menu .menu li:first-child {
  margin-top: 3px;
}

.sub-menu ul li {
  display: none;
}

.logo img:hover .sub-menu ul li {
  display: block;
}


/* Tessa's Changes */

#htc-menu {
  list-style: none;
}

#htc-menu:hover li.sub-menu ul.menu li {
  display: block;
}

＆＃13;

<div class="area-left">
  <ul id="htc-menu" class="parent-menu">
    <li class="logo ico-container">
      <div class="menu-icon">
        <hr/>
        <hr/>
        <hr/>
      </div><img src="images/logo.png" alt="HTC Logo">
    </li>
    <li class="sub-menu">
      <ul class="menu">
        <li><a href="http://www.htc.com/us/smartphones-learn/">smartphones</a></li>
        <li><a href="http://www.htc.com/us/accessories/">accessories</a></li>
        <li><a href="https://www.vive.com/us/">virtual reality</a></li>
        <li><a href="http://www.htc.com/us/fitness/ua-healthbox/">fitness</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

无法进行下拉悬停工作

2 个答案: