Question

我正在编写一个选项卡控件，我希望每个非活动的选项卡链接（菜单项，而不是主体）使用分配给该元素的属性的颜色作为:hover背景属性。 / p>

示例html（经过简化）

$(document).ready(function(){

  function initTabs() {
    var active = $('nav > ul > li.active');
    if(active === undefined) { active = $('nav > ul > 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 > ul > 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');
    
  });


});

body {
  margin: 0;
  background: black;
}

nav {
  display: flex;
  flex-direction: column;
  background: black;
}

nav > ul {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex: 1;
  margin: 0px;
}

nav > ul > li {
  padding: 5px;
  font-size: 1.2em;
  color: white;
  font-family: sans-serif;
}

/***
I have tried :
    background: attr(data-bgcolor);
***/
nav > ul > li:not(.active) {
  background: black;
  color: white;
  cursor: pointer;
}

nav > ul > li:not(.active):hover {
  background: white;
  color: black;
}

nav > ul > li.active {
  cursor: default;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<nav>
  <ul>
    <li data-bgcolor="red">Home</li>
    <li data-bgcolor="blue">News</li>
    <li data-bgcolor="orange">Blog</li>
  </ul>
</nav>

使用上面的示例，我想为

设置值

nav > ul > li:not(.active) {
  background: black;
  ...
}

使用当前悬停的data-bgcolor元素中的li值。

我正在寻找一种特定于CSS的方式来处理此问题（如您所见，我可以在jQuery中很好地处理问题），因为CSS的执行速度要快得多，并且不易在mouseover / mouseleave上发生怪癖事件发生时会很快发生。

我尝试在CSS中使用attr()值，但是由于某种原因，这对我不起作用，或者由于选择器中的嵌套，在那里存在问题。

对于当前正在进行的整个项目，您可以看到my pen here

Answer 1

使用CSS变量：

body {
  margin: 0;
  background: yellow;
}

nav {
  display: flex;
  flex-direction: column;
  background: black;
}

nav > ul {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex: 1;
  margin: 0px;
}

nav > ul > li {
  padding: 5px;
  font-size: 1.2em;
  color: white;
  font-family: sans-serif;
}

nav > ul > li:not(.active) {
  background: #000;
  color: white;
  cursor: pointer;
}

nav > ul > li:not(.active):hover {
  background: var(--bgcolor);
  color: black;
}

nav > ul > li.active {
  cursor: default;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<nav>
  <ul>
    <li style="--bgcolor:red">Home</li>
    <li style="--bgcolor:blue">News</li>
    <li style="--bgcolor:orange">Blog</li>
  </ul>
</nav>

Answer 2

您不能以所需的方式使用attr：

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

attr。 attr（）CSS函数用于检索所选元素的属性值，并在样式表中使用它。 ...注意：attr（）函数可以与任何CSS属性一起使用，但是对内容以外的属性的支持是试验性的，对type-or-unit参数的支持很稀疏。

所以

[data-bgcolor] { color: attr(data-bgcolor); }

不起作用，但

[data-bgcolor]::before {
  content: attr(data-bgcolor) " ";
}

可以在Chrome浏览器中工作

我以为你不想拥有

[data-bgcolor="green"] { background-color: green; }

$(document).ready(function(){

  function initTabs() {
    var active = $('nav > ul > li.active');
    if(active === undefined) { active = $('nav > ul > 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 > ul > 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');
    
  });


});

body {
  margin: 0;
  background: black;
}

nav {
  display: flex;
  flex-direction: column;
  background: black;
}

nav > ul {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex: 1;
  margin: 0px;
}

nav > ul > li {
  padding: 5px;
  font-size: 1.2em;
  color: white;
  font-family: sans-serif;
}

/***
I have tried :
    background: attr(data-bgcolor);
***/
nav > ul > li:not(.active) {
  background: black;
  color: white;
  cursor: pointer;
}

nav > ul > li:not(.active):hover {
  background: white;
  color: black;
}

nav > ul > li.active {
  cursor: default;
}

[data-bgcolor] { color: attr(data-bgcolor); }

[data-bgcolor]::before {
  content: attr(data-bgcolor) " ";
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<nav>
  <ul>
    <li data-bgcolor="red">Home</li>
    <li data-bgcolor="blue">News</li>
    <li data-bgcolor="orange">Blog</li>
  </ul>
</nav>

Answer 3

如果您对颜色的选择有限，则可以使用CSS中的属性选择器来解决当前的问题

[data-bgcolor="green"] { background-color: green; }
[data-bgcolor="blue"] { background-color: blue; }

这是否有意义取决于您的用例。

如何在悬停时使用CSS中属性的值更改元素的背景颜色

3 个答案: