如何允许 CSS 中 TOP 上的"Hover"与菜单上的伪"::before"渐变背景效果结合使用？

Question

运行下面的代码片段，菜单设计具有悬停效果颜色变化。 但是，我的问题是，结合渐变效果来隐藏此菜单设计上的超长文本，我无法让悬停出现在渐变上方。

阅读有关使用 z-index 的使用和测试似乎不可能像我正在使用的伪元素。

有什么想法吗？

<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="article.php">#Google</a>
</div>
<div class="topic_nav_arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>

a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}
a:active {
color: white;
text-decoration: none;
}
/* NAV > LIST > ROW */
li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}
li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
/* LIST > ROW > TITLE */
.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}
.topic_nav_title a {
height: 20px;
}
.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}
.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}

<div class="topic_nav_container">
<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="#">Menu Item One That Is Long</a>
</div>
</li>
<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="#">Menu Item Two That Is Too</a>
</div>
</li>

</div>

Answer 1

你可以将鼠标悬停在渐变上禁用它......像例子一样

a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}
a:active {
color: white;
text-decoration: none;
}
/* NAV > LIST > ROW */
li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}
li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
/* LIST > ROW > TITLE */
.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}
.topic_nav_title a {
height: 20px;
}
.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}
.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
.topic_nav_title:hover:before{
background:none;
}
.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}

<div class="topic_nav_container">
<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="#">Menu Item One That Is Long</a>
</div>
</li>
<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="#">Menu Item Two That Is Too</a>
</div>
</li>

</div>