title: How can I change the background color of an element using the value from an attribute in CSS on hover
body: <p>I am writing a tab control where I would like each non-active tab link (menu item, not the body), to use the color assigned as an attribute on that element as the <code>:hover</code> background property.</p>
  
  <p>Example html (dramatically simplified)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
    function initTabs() {
      var active = $('nav &gt; ul &gt; li.active');
      if(active === undefined) { active = $('nav &gt; ul &gt; li:first-of-type'); }
  
      var color = active.attr('data-bgcolor');
      if(color === undefined) { color = 'purple'; }
      
      $('body').css('background', color );
      active.css('background', color );
    }
    initTabs();
  
    $('nav &gt; ul &gt; li:not(.active)').click(function(){
      var color = $(this).attr('data-bgcolor');
      if(color === undefined) { color = 'black'; }
  
      $(this).parent().find('li').each(function() {
        $(this).css('background', '').removeClass('active');
      })
      
      $('body').css('background', color);
      $(this).css('background', color).addClass('active');
      
    });
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    background: black;
  }
  
  nav {
    display: flex;
    flex-direction: column;
    background: black;
  }
  
  nav &gt; ul {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex: 1;
    margin: 0px;
  }
  
  nav &gt; ul &gt; li {
    padding: 5px;
    font-size: 1.2em;
    color: white;
    font-family: sans-serif;
  }
  
  /***
  I have tried :
      background: attr(data-bgcolor);
  ***/
  nav &gt; ul &gt; li:not(.active) {
    background: black;
    color: white;
    cursor: pointer;
  }
  
  nav &gt; ul &gt; li:not(.active):hover {
    background: white;
    color: black;
  }
  
  nav &gt; ul &gt; li.active {
    cursor: default;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li data-bgcolor="red"&gt;Home&lt;/li&gt;
      &lt;li data-bgcolor="blue"&gt;News&lt;/li&gt;
      &lt;li data-bgcolor="orange"&gt;Blog&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>Using the above example, I would like to set the value for </p>
  
  <pre><code>nav &gt; ul &gt; li:not(.active) {
    background: black;
    ...
  }
  </code></pre>
  
  <p>Using the <code>data-bgcolor</code> value from the <code>li</code> element currently being hovered over.</p>
  
  <p>I am looking for a CSS specific way to handle this (as you can see I can handle things fairly well in jQuery) because CSS just performs much faster and isn't (as) prone to quirks that occur on mouseover/mouseleave events when they happen to fast.</p>
  
  <p>I have tried using the <code>attr()</code> value in CSS but for some reason this doesn't work for me or perhaps due to the nesting in my selectors, there is an issue there.</p>
  
  <p>For the full project currently in the works, you can see <a href="https://codepen.io/microvb/pen/NOXZQp" rel="nofollow noreferrer">my pen here</a></p>