如何讓一個CSS上的「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>