title: How to set the hover state equals the active state with li clearfix element using ui-sref-active="active"
body: <p>I create 2 buttons on one line and have some problem with styling them correctly with the template i'm using.</p>
  
  <p>The button has 4 states but when client is active it goes wrong.</p>
  
  <p>The first state is when nothing is happens.</p>
  
  <p><a href="https://i.stack.imgur.com/lMijC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lMijC.png" alt="enter image description here"></a></p>
  
  <p>The second state is when the + sign is active or in hover status</p>
  
  <p><a href="https://i.stack.imgur.com/kNwbN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kNwbN.png" alt="enter image description here"></a></p>
  
  <p>On de third state when i hover over clients i get this:
  which works correctly.</p>
  
  <p><a href="https://i.stack.imgur.com/oGK1I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oGK1I.png" alt="enter image description here"></a></p>
  
  <p>But when the client is active i get the same result as when nothing is active.
  So what could i do to get the active state equals to the hover state from picture 3.</p>
  
  <p><a href="https://i.stack.imgur.com/lMijC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lMijC.png" alt="enter image description here"></a></p>
  
  <p>the html goes like this:</p>
  
  <pre><code>    &lt;li  ui-sref-active="active" class="clearfix li-button"&gt; &lt;a class="btn btn-primary-li-left" ui-sref="app.clients"  ripple=""&gt;&lt;em class="sidebar-item-icon icon-head"&gt;&lt;/em&gt; Clients  &lt;/a&gt; &lt;a  class="btn btn-primary-li-right "  ui-sref="app.addclient" &gt;+&lt;/a&gt;  &lt;/li&gt;
  </code></pre>
  
  <p>I use app.html as template where i have this:</p>
  
  <pre><code>&lt;aside ng-include="'html/main/templates/sidebar.html'" ng-class="app.theme.sidebar"&gt;&lt;/aside&gt;
  </code></pre>
  
  <p>the class app.theme.sidebar == #bg-white</p>
  
  <p>The css i added is this it works without the template :</p>
  
  <pre><code>.li-button  a{
      float:left;
      display: block;
  }
  
  .li-button  a:first-child{
      width: 77%;
  }
  
  .li-button  a:last-child{
      width: 15%;
      margin-left: 2%;
      margin-right: 2%;
      color: #ffffff;
  
  }
  
  .btn-primary-li-left {
      text-align: left;
      vertical-align: middle;
  
      font-weight: 900;
      height: 40px;
  }
  
  .btn-primary-li-right {
      height: 40px;
      text-align: center;
      vertical-align: middle;
  
      font-weight: 900;
  }
  
  
  .li-button  a:last-child:hover {
  
      color: #ffffff;
      background: #0493ac;
  }
  
  .li-button  a:first-child:hover +a:last-child{
      color: #ffffff;
      background: #0e8eac;
  }
  </code></pre>
  
  <p>I think it has something todo with this which is from the template :</p>
  
  <pre><code>#bg-white .nav &gt; li.active,
  .bg-white .nav &gt; li.active {
      background-color: #0df9ee !important;
  }
  
  #bg-white .nav &gt; li:hover &gt; a,
  .bg-white .nav &gt; li:hover &gt; a {
      background-color: #00f3bd;
  }
  #bg-white .nav &gt; li.active &gt; a,
  .bg-white .nav &gt; li.active &gt; a {
      background-color: #f32400;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>So i did a bit modification on the answer of Shane but i still do not get the result i wanted it got even weirder.</p>
  
  <p>if i do this the button is green</p>
  
  <pre><code>#bg-white .nav &gt; li &gt; a.btn-primary-li-left,
  .bg-white .nav &gt; li &gt;a.btn-primary-li-left{
      background-color: #05f900 !important;
  } 
  </code></pre>
  
  <p>but when i add the active element nothing happens and get the same result as the first picture in this question.</p>
  
  <pre><code>#bg-white .nav &gt; li &gt; a.btn-primary-li-left.active,
  .bg-white .nav &gt; li &gt;a.btn-primary-li-left.active {
      background-color: #05f900 !important;
  }
  </code></pre>