Question

我希望在悬停在上面时将徽标设为下拉图片，但它不起作用，你能帮忙吗？

dropdown {
  position: relative;
  display: inline-block;
}
dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
desc {
  padding: 15px;
  text-align: center;
}
dropdown:hover dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html lang="ro">


<head>
  <title>Evolutia sistemelor de operare Windows</title>
  <meta charset="utf-8">
</head>

<body>
  <div class="dropdown">
    <img src="winlogo.png" alt="Windows Logo" width="100" height="50">
    <div class="dropdown-content">
      <img src="winlogo.png" alt="Windows Logo" width="300" height="200">
      <div class="desc">Microsoft's OS Logo since Windows 8</div>
    </div>
  </div>
</body>

</html>

我是CSS新手，我的第一个项目必须将此悬停包含在图片上，我提到我需要使用mystyle.css中的css，而不是在索引页面中使用<style>。

Answer 1

你错过了CSS中类规则的点，应该是.classname

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.desc {
  padding: 15px;
  text-align: center;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html lang="ro">


<head>
  <title>Evolutia sistemelor de operare Windows</title>
  <meta charset="utf-8">
</head>

<body>
  <div class="dropdown">
    <img src="winlogo.png" alt="Windows Logo" width="100" height="50">
    <div class="dropdown-content">
      <img src="winlogo.png" alt="Windows Logo" width="300" height="200">
      <div class="desc">Microsoft's OS Logo since Windows 8</div>
    </div>
  </div>
</body>

</html>

Answer 2

你忘了把CSS放在CSS文件中的类名前面。

您的代码是：

dropdown:hover dropdown-content {
    display: block;
}

你必须这样说：

.dropdown:hover .dropdown-content {
    display: block;
}

我认为使用菜单和下拉列表的最佳方法是使用元素ul li intead。我建议您使用前端库，如Bootstrap甚至Materialize-css，这样易于使用，并遵循良好做法。

图像悬停的CSS下拉列表

2 个答案: