使用:hover，:focus来更改悬停类之外的另一个css

Question

我有css类，它们都是同级：flex-align和nav-dropdown当我悬停在flex-align上时，它工作得很好，nav-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>

Answer 1

您可以使用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>

Answer 2

由于您无法在CSS中选择父元素(等待可能的CSSv4解决方案(，请使用JS。悬停时将类添加到父元素

$(document).ready(function () {
$('.flex-align i').hover(
function () {
$(this).closest('.parent-wrapper').addClass('hover');
},
function () {
$(this).closest('.parent-wrapper').removeClass('hover');
}
)
});

.flex-align {
display: flex;
justify-content: start;
align-items: center;
}
.nav-dropdown {
display: none !important;
width: auto !important;
}
.hover .nav-dropdown {
display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="parent-wrapper">
<div class="flex-align">
<i class="fa fa-arrow-right dropdown-icon"></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>
</div>