时间戳

首页 > 解决方案 > 使用 :hover, :focus 更改悬停类之外的另一个 css

html - 使用 :hover, :focus 更改悬停类之外的另一个 css

问题描述

我有两个兄弟姐妹的css类： 当我将鼠标悬停在更改flex-align时它工作正常。nav-dropdownflex-alignnav-dropdown

.flex-align:hover ~ .nav-dropdown {
   display: block !important;
}

问题：我想要的是它只在我hover或focus哪个icon是 的孩子时改变flex-align，这是唯一一次nav-dropdown改变

谢谢

.flex-align {
    display: flex;
    justify-content: start;
    align-items: center;
}

.nav-dropdown {
    display: none;
    width: auto;
}
.flex-align i:hover ~ .nav-dropdown {
    display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="flex-align">
    <i class="fa fa-arrow-right dropdown-icon">&nbsp;</i>
    <p>Main test</p>
</div>
<ul class="nav-dropdown">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>
</ul>

标签： htmlcss

解决方案

您可以使用pointer-eventsCSS 属性来确保图标将悬停事件发送到其父级，但文本不会：

.flex-align {
  display: flex;
  justify-content: start;
  pointer-events: none;
}
.flex-align i {
  pointer-events: auto;
}
.nav-dropdown {
  display: none;
}
.flex-align:hover ~ .nav-dropdown {
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="flex-align">
  <i class="fa fa-arrow-right dropdown-icon">&nbsp;</i>
  <span>Main test</span>
</div>
<ul class="nav-dropdown">
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 2</a></li>
  <li><a href="#">test 3</a></li>
</ul>

推荐阅读