Question

我的下拉菜单后面有一个div，当我使div透明（不透明属性）时，它会在鼠标悬停下拉菜单前面出现，这会导致当鼠标进入div时，下拉菜单会消失。区域。但我想保持那个div trasparent。我已经尝试过设置z-index属性，但它没有帮助。

这里是html代码（简化）

./app/tutorial/chapter/chapter.css

和css：

<div id="div1">
  <ul>

    <li><a href="#">PROUCT</a>
      <ul>
        <li><a href="#">Product 1 </a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
        <li><a href="#">Product 4</a></li>
        <li><a href="#">Product 5</a></li>
        <li><a href="#">Product 6</a></li>
        <li><a href="#">Product 7</a></li>
      </ul>
    </li>

  </ul>

  <div id="buying_form">
    <h2> please fill your buying form</h2></div>

</div>

您可以在此处看到此行为：

https://jsfiddle.net/xsmael/mdthqdh4/4/

Answer 1

首先，不要使用opacity ...它会使内容也具有不透明性。使用具有alpha值（rgba）的背景颜色。 See this question

然后你需要绝对定位子菜单（父母li）position:relative;

ul {
  margin: 0px;
  padding: 0px;
}
ul li {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid white;
  width: 330px;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  list-style: none;
  position: relative;
}
ul li a {
  color: white;
  text-decoration: none;
  display: block;
}
ul li a:hover {
  background-color: ORANGE;
}
ul li ul {
  position: absolute;
  display: none;
}
ul li:hover ul {
  display: block;
  cursor: default;
}
#div1 {
  width: 200px;
  height: 650px;
  background: url(bgi2.jpg);
  text-align: center;
}
#buying_form {
  float: left;
  margin-left: 4px;
  margin-top: 100px;
  width: 326px;
  height: 442px;
  color: MEDIUMBLUE;
  border: 1px solid gray;
  background-color: rgba(0, 0, 255, 0.25);
}
body {
  background: lightgreen;
}

<div id="div1">
  <ul>
    <li><a href="#">PROUCT</a>
      <ul>
        <li><a href="#">Product 1 </a>
        </li>
        <li><a href="#">Product 2</a>
        </li>
        <li><a href="#">Product 3</a>
        </li>
        <li><a href="#">Product 4</a>
        </li>
        <li><a href="#">Product 5</a>
        </li>
        <li><a href="#">Product 6</a>
        </li>
        <li><a href="#">Product 7</a>
        </li>
      </ul>
    </li>
  </ul>

  <div id="buying_form">
    <h2> please fill your buying form</h2>
  </div>

</div>

trasparent div隐藏透明下拉菜单悬停

1 个答案: