将鼠标悬停在图像上时，使用css显示菜单

Question

我希望菜单能够在用户显示图像时显示。目前，当我将鼠标悬停在图像上时，我没有看到任何内容。

.locklear-brand {
    float: right;
    padding-right: 50px;
}
.locklear-brand img {
    width: 30px;
    padding-top: 5px;
}
.locklear-brand ul {
    display: none;
    position: absolute; 
}
.locklear-brand img:hover > ul {
    display: inherit;
}
.locklear-brand ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

<div class="locklear-brand">
  <img src="locklear.png">
  <ul>
    <li><a href="#">Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Tutorials</a></li>
  </ul>
</div>

Answer 1

这是因为您使用直接后代选择器>而不是直接兄弟选择器+。这是因为<ul>元素不是<img>元素的子元素，而是它的兄弟元素。

更改它可以解决您的问题：.locklear-brand img:hover + ul。请参阅下面的概念验证：

＆＃13;

＆＃13;

.locklear-brand {
    float: right;
    padding-right: 50px;
}
.locklear-brand img {
    width: 30px;
    padding-top: 5px;
}
.locklear-brand ul {
    display: none;
    position: absolute; 
}
.locklear-brand img:hover + ul {
    display: inherit;
}
.locklear-brand ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

＆＃13;

<div class="locklear-brand">
  <img src="http://via.placeholder.com/150x150" />
  <ul>
    <li><a href="#">Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Tutorials</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

一个更相关的问题是：如何创建一个下拉菜单，以便在图像悬停时，菜单仍然可以互动。这意味着您希望整个.locklear-brand接收悬停状态，而不仅仅是图像元素：

＆＃13;

＆＃13;

.locklear-brand {
    float: right;
    padding-right: 50px;
}
.locklear-brand img {
    width: 30px;
    padding-top: 5px;
}
.locklear-brand ul {
    display: none;
    position: absolute; 
    
    /* Ensure that mouse can move to <ul> without exiting parent */
    margin-top: 0;
}
.locklear-brand:hover ul {
    display: inherit;
}
.locklear-brand ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

＆＃13;

<div class="locklear-brand">
  <img src="http://via.placeholder.com/150x150" />
  <ul>
    <li><a href="#">Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Tutorials</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议使用以下CSS来访问菜单：

<style>
    .locklear-brand {
    float: right;
    padding-right: 50px;          
}
.locklear-brand img {
    width: 30px;
    padding-top: 5px;
  padding-bottom: 0px;
  margin: 0px;
}
.locklear-brand ul {
    display: none;
    position: relative;       
}
.locklear-brand:hover > ul {
    display: block;
    }
.locklear-brand ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}    
  </style>

换句话说，将容器悬停在div而不是图像上。 结帐DEMO

＆＃13;

＆＃13;

.locklear-brand {
    float: right;
    padding-right: 50px;
      
}
.locklear-brand img {
    width: 30px;
    padding-top: 5px;
  padding-bottom: 0px;
  margin: 0px;
}
.locklear-brand ul {
    display: none;
    position: relative; 
  
}
.locklear-brand:hover > ul {
    display: block;  
    }
.locklear-brand:hover{
      border-left: 1px solid #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-shadow: -6px 1px 5px rgba(0,0,0,0.5);
    }
    
.locklear-brand ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

＆＃13;

<div class="locklear-brand">
  <img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">
  <ul>
    <li><a href="#">Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Tutorials</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;