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 の記述方法では、クラス (Twig パーサーによって解釈される) を持つ要素が id を持つ同じ要素上にあると想定されます{{ c.id }}。nav

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

1 つのページに同じ属性を持つ要素を 2 つ以上持つべきではありません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 を配置するか、より適切な方法として、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 に答える