0

我有这个代码目前不起作用，有什么替代方法吗？

<ul class="sub">
 {% for key, c in categori %}
     <style>
         #nav.{{c.id}}:hover
         {
           background-color: #{{c.color}};
         }
     </style>
        <li class="{{c.id}}">
            <a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....

我遇到了# nav 中的问题。{{c.id}}

ow.ly/i/3vwNp 这是示例

谢谢！

4

2 回答 2

2

您的 CSS 的编写方式，它期望具有类的元素{{ c.id }}（由 Twig 解析器解释）与 id 位于同一元素上nav，例如

<li id="nav" class="{{ c.id }}">...</li>

你真的不应该在一个页面上拥有多个具有相同id属性的元素，JavaScript 会发生奇怪的事情，尤其是当你这样做的时候。

与其尝试以编程方式定义你{{ c.id }}的风格，为什么不做这样的事情呢？

<style>
  #nav .item:hover
  {
    background-color: #{{c.color}};
  }
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
  <li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>

你真的应该只以任何方式将 CSS 放在<style>文档顶部的标签中，或者作为更好的做法，将它们梳理到.css要包含的资源文件中。

于 2013-10-23T15:47:56.903 回答
1

这肯定会奏效：

<ul class="sub">
{% for c in categori %}
  <style>
     .element{{c.id}} a:hover { background-color: #{{c.color}}; }
  </style>
  <li class="element{{c.id}}">
    <a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...

但建议将您的 CSS 规则与 HTML 分开，并将所有预定义的元素类移动到外部 CSS 资产。

于 2013-10-23T18:04:34.277 回答