Question

页面的标题中包含ol。在最后两个中，有一个用户名和个人资料图片。我想在鼠标悬停在用户名或个人资料图片上显示下拉菜单。但是它不会在悬停时显示菜单。我的下拉菜单内容中只有一个lebel。在mozilla中，悬停时不显示任何内容，在chrome中，悬停时也不显示任何内容，但是默认情况下，它显示标签。

.head{
    top:0;
    background:#424242;
    padding:1px;
    height:10%;
}
li{
     display:inline-block;
     color:#E0E0E0;
     cursor:pointer;
     padding:10px 10px 2px 10px;
     font-size:20px;
}
li:hover{
    color:white;
}
li.active{
    color:white;
    border-bottom:1px solid white;
    
}
.right{
    float:right;
    color:white;
}
#profilepic{
    border-radius:50%;
    width:40px;
    height:40px;
    margin:-10px 50px 0 20px;
}

.dropdown-content {
    display:none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    right:0;
    margin-right:20px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content label {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content label:hover {background-color: #ddd;}

.right:hover .dropdown-content {display: block;}

<div class="head">
            <ul>
                <li>HOME</li>
                <li onClick="NewApplication();">NEW APPLICATION</li>
                <li onClick="PendingApplication();">PENDING APPLICATION</li>
                <li onClick="Customer();">APPROVED</li>
                <li>LOAN STRUCTURE</li>
                <li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
                <li class="right">ABC</li>
            </ul>
            <div class="dropdown-content">
                <label onClick="Setting();">SETTINGS</label>
            </div>
        </div>

Answer 1

请像这样重组您的html，这将是显示下拉菜单的理想选择。

下面的类将用于显示隐藏的下拉菜单。

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

.right {
  float: right;
  color: black;
  position:relative;
}

#profilepic {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -10px 50px 0 20px;
}

.show-settings:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  right: 0;
  margin-right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: hidden;
}

.dropdown-content label {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

<div class="head">
  <ul>
    <li>HOME</li>
    <li onClick="NewApplication();">NEW APPLICATION</li>
    <li onClick="PendingApplication();">PENDING APPLICATION</li>
    <li onClick="Customer();">APPROVED</li>
    <li>LOAN STRUCTURE</li>
    <li class="right show-settings">
      <img id="profilepic" src="http://via.placeholder.com/50x50"> username
      <div class="dropdown-content">
        <label onClick="Setting();">SETTINGS</label>
      </div>
    </li>
  </ul>
</div>

Answer 2

在两个CSS选择器（.class1 .class2之间放置空格，当.class2嵌套在class1内时，指定您要使用层次结构。您不能仅通过CSS获得元素的父级。因此，要解决您的问题，您应该使用js或在.dropdown-content元素中加入<ul>（将其从<div>更改为<li>，因为内部仅列出{ {1}}元素有效），然后通过CSS3's general sibling selector（或CSS3's adjacent sibling selector，我在这里不使用它）访问它：

解决方案1：

<li>

.right {
  float: right;
}

#profilepic {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -10px 50px 0 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  right: 0;
  margin-right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content label {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

.right:hover ~ .dropdown-content, /* or ".right:hover + .dropdown-content" with adjacent sibling selector */
.dropdown-content:hover /* For the dropdown won't disappear when hover it */ {
  display: block;
}

解决方案2：

<div class="head">
  <ul>
    <li>HOME</li>
    <li onClick="NewApplication();">NEW APPLICATION</li>
    <li onClick="PendingApplication();">PENDING APPLICATION</li>
    <li onClick="Customer();">APPROVED</li>
    <li>LOAN STRUCTURE</li>
    <li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
    <li class="right">ABC</li>
    <li class="dropdown-content">
      <label onClick="Setting();">SETTINGS</label>
    </li>
  </ul>
</div>

window.onload = function() {
  var dropdown = document.querySelector('.dropdown-content');
  
  document.querySelectorAll('.right').forEach(function(el) {
    el.addEventListener('mouseover', function() {
      dropdown.style.display = 'block';
    }, false);
    el.addEventListener('mouseout', function() {
      dropdown.style.display = 'none';
    }, false);
  });
};

.right {
  float: right;
}

#profilepic {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: -10px 50px 0 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  right: 0;
  margin-right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content label {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

将鼠标悬停在不显示div上

2 个答案: