内联 CSS 不适用于我的 li [重复]答案

【问题标题】：inline css not working for my li [duplicate]内联 CSS 不适用于我的 li [重复]
【发布时间】：2013-11-04 22:30:17
【问题描述】：

我尝试如下设置一个新的background hover color到我的li tag 但我设置失败

请指导我的语法。

  <nav class="icons-example">
                        <ul>
                        <li><a href="#"><span class="font-icon-social-facebook" style=":hover a { background-color: blue;}"></span></a></li>
 <li><a href="#"><span class="font-icon-social-tweeter" style=":hover a { background-color: nevyblue;}"></span></a></li>
    </ul>
    </nav>

在css文件中

.icons-example ul li:hover a,
.icons-example ul li.active a {
background-color: red;  
}

我想将蓝色设置为悬停，请帮帮我。

是的，我可以更改 css 本身，但我需要单独更改每个 li 的颜色例如facebook bluetweeter navyblue.?

谁能给我每个 li 的确切 css 更改

【问题讨论】：

更新了我的确切问题，请评论@Richard
答案不变。你不能这样做。您需要为每个 LI 使用不同的类或使用 javascript。
哦，任何人都可以给我每个 li 的确切 css 更改
是什么阻止你使用 jquery
如果简单的 css 技巧可以帮助为什么要使用 jquery :)

标签： jquery html css

【解决方案1】：

内联 CSS 是该 DOM 对象的 direct 样式。

你不能告诉它style=":hover a { background-color: blue;}"

【讨论】：

那有什么解决办法:(
使用样式表或直接在您要设置样式的项目上执行内联 css。

【解决方案2】：

style attribute for HTML elements 仅支持 CSS 属性。它不支持 CSS 选择器。

为了为每个列表项实现不同的颜色，您需要在样式表中单独定位每个项。大意是：

.icons-example ul li:hover a,
.icons-example ul li.active a {
    background-color: red;  
}

.icons-example ul li:hover .font-icon-social-facebook
{
    background-color: blue;  
}

您可能希望将“facebook”的类属性添加到该元素的 LI，因此您可以执行以下操作：

.icons-example ul li.facebook:hover a
{
    background-color: blue;  
}

【讨论】：

那有什么解决办法:(

【解决方案3】：

将声明添加到您的样式表

.icons-example ul li.active a {
  background-color: red;  
}
.icons-example ul li.active a span:hover {
  background-color: blue;  
}

【讨论】：

修改了我的确切问题

【解决方案4】：

这应该可以解决问题：

.icons-example ul li:hover a,
.icons-example ul li.active a {
background-color: red;  
}

.icons-example ul li:hover a span.font-icon-social-facebook,
.icons-example ul li.active a span.font-icon-social-facebook {
background-color: blue;  
}

.icons-example ul li:hover a span.font-icon-social-twitter,
.icons-example ul li.active a span.font-icon-social-twitter {
background-color: navy;  
}

等等……

【讨论】：