Html、CSS固定幅ハイライトホバーの背景

Question

リスト項目の全幅ホバーバックグラウンドを達成しようとしています。

また、私は左に向けた灰色の背景全幅を取得する必要があります。

私はこれを実現するにはどうすればよい：

HTML：

<div class="col-md-5 col-xs-12 additonal-resources-cont"> 
       <h3 class="header-additnl-resources">Additional Resources </h3> 
       <ul class="additional-resrc-ul nopadding"> 
        <li><a href="" class="additional-resources-href">Login/Register</a></li> 
        <li><a href="" class="additional-resources-href">Request Samples</a></li> 
        <li><a href="" class="additional-resources-href">Technical Documentation</a></li> 
       </ul> 
      </div> 

CSS：

.additional-resources-href:hover { 
    background: #1daeeb; 
    opacity: 4.5; 
    background-color: #BFCDD5 !important; 
} 


.additional-resources-href { 
    color: black; 
    text-decoration: none; 
} 

.additional-resrc-ul li:before { 
    content: "• "; 
    font-weight: bold; 
    color: #1DAEEB; 
} 

.additional-resrc-ul li:hover { 
    background: #1daeeb; 
    opacity: 4.5; 
    background-color: #BFCDD5; 
} 

.additional-resrc-ul { 
    margin: 0px; 
    padding: 0px; 
    margin-left: 10%; 
    font-weight: 300; 
    font-size: 10px; 
    line-height: 3.5em; 
} 

あなたは、Liの外にオーバーフローし、すべてカバーする擬似要素を使用することができます

Answer 1

このような幅：

ここで

.additional-resources-href:hover { 
 
    background: #1daeeb; 
 
    opacity: 4.5; 
 
    background-color: #BFCDD5 !important; 
 
} 
 

 
.additional-resources-href { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
.additional-resrc-ul li { 
 
    position:relative; 
 
} 
 
.additional-resrc-ul li:before { 
 
    content: "• "; 
 
    font-weight: bold; 
 
    color: #1DAEEB; 
 
} 
 

 
.additional-resrc-ul li:after { 
 
    content: ""; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: -30%; 
 
    right: 0; 
 
} 
 

 
.additional-resrc-ul li:hover { 
 
    
 
    opacity: 4.5; 
 
} 
 

 
.additional-resrc-ul li:hover::after { 
 
    background: #BFCDD5; 
 
} 
 

 
.additional-resrc-ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    margin-left: 10%; 
 
    font-weight: 300; 
 
    font-size: 10px; 
 
    line-height: 3.5em; 
 
}

<div class="col-md-5 col-xs-12 additonal-resources-cont"> 
 
    <h3 class="header-additnl-resources">Additional Resources </h3> 
 
    <ul class="additional-resrc-ul nopadding"> 
 
    <li><a href="" class="additional-resources-href">Login/Register</a></li> 
 
    <li><a href="" class="additional-resources-href">Request Samples</a></li> 
 
    <li><a href="" class="additional-resources-href">Technical Documentation</a></li> 
 
    </ul> 
 
</div>

Answer 2

私はフレックス列でメニューを作成し、各項目にホバーを適用し、トランジションを追加しました。

.container{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.resources-list{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 0 20%; 
 
} 
 

 
.resources-item{ 
 
    transition: all 250ms linear; 
 
} 
 

 
.resources-item:hover{ 
 
    background-color: gray; 
 
} 
 

 
.resources-item:before{ 
 
    content: '• '; 
 
} 
 

 
.app-content{ 
 
    flex: 0 0 75%; 
 
}

<div class="container"> 
 
     <div class="resources-list"> 
 
      <h3>Resources List</h3> 
 
      <div class="resources-item">lorem3</div> 
 
      <div class="resources-item">lorem3</div> 
 
      <div class="resources-item">lorem3</div> 
 
     </div> 
 
     <div class="app-content"> 
 
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum mollitia illum voluptates. Cumque earum cupiditate explicabo dolorum, praesentium dolor quia consequatur incidunt iste excepturi blanditiis dolores quibusdam odio quas quo. 
 
     </div 
 
    </div>