Django动态css实现：只有一个项目动态变化（背景）。如何？ [英] Django dynamic css implementation: only one item changes (background) dynamically. How to?

问题描述

我想设置一个单一的CSS样式，从一些django变量动态获取背景
。

我认为增加的困难是

  .titles-button h2 a {
 margin-left：4em; 
 margin-right：4em; 
 margin-top：1em; 
 margin-bottom：1em; 
 display：block; 
 width：240px; 
 height：80px; 
 / * background：transparent url（../ logos / djangoVX_logo.png）center left no-repeat; * / 
 text-indent：-999em; 
 border：1px broken green; 
} 
 .titles-button h2 a：hover {
 / * background：transparent url（../ logos / djangoVX_logo2.png）center left no-repeat; * / 
} 
  

请注意背景已注释。

我想在DIV中使用这种风格，并动态更新背景。

喜欢：

  {％if the_apps_list％} 
 {％for_apps_list％}中的应用程式
< div class =titles-button> 
< h2>< a href =/ {{apps.app_name}} /style =X> {{apps.app_name}}< / a>< / h2> 
< / div> 
 {％endfor％} 
 {％else％} 
< p>没有APPS可用。内部错误。< / p> 
 {％endif％} 
  

我尽力为X 。

除了：
- 在X
中重写完整的样式 - 使用一些javascript花哨的东西（on_mouse_over ...）
- 我甚至看到一个类：inheritALL

这个解决方案没有符合我使用django的想法。

我可能从错误的一边得到公牛...

..哪一个是右边？

cheers
F

解决方案

假设你有背景的黑暗您的代码可能如下所示：

views.py：

  ... 
 if i_want_dark_version：
 context ['style'] ='dark'
 else：
 context ['style'] ='light' 
  

template.html：

 < div id =titles-buttonclass ={{style}}> 
 ... 
< / div> 
  

style.css：

 ＃titles-button.dark h2 a {
 background：...; 
} 
＃titles-button.dark h2 a：hover {
 background：...; 
} 
 
＃titles-button.light h2 a {
 background：...; 
} 
＃titles-button.light h2 a：hover {
 background：...; 
} 
  

I would like to set up one single css style which gets the background dynamically from some django variable.

I think the added difficulty is that it is related to a:hover.

The original static style.css code runs like:

.titles-button h2 a {
    margin-left: 4em;
    margin-right: 4em;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    width: 240px;
    height: 80px;
    /* background: transparent url(../logos/djangoVX_logo.png) center left no-repeat; */
    text-indent: -999em;
    border: 1px dashed green;
}
.titles-button h2 a:hover {
    /* background: transparent url(../logos/djangoVX_logo2.png) center left no-repeat; */
}

Note the background is now commented.

I would like to use this style within a DIV and update dynamically the background.

Like:

{% if the_apps_list %}
    {% for apps in the_apps_list %}
    <div class="titles-button"> 
        <h2><a href="/{{ apps.app_name }}/" style="X">{{ apps.app_name }}</a></h2> 
    </div>
    {% endfor %}
{% else %}
    <p>No APPS are available. Internal Error.</p>
{% endif %}

I did my best for "X" but with no results.

With the exception of: - Rewrite the full style in X - Use some javascript fancy stuff (on_mouse_over...) - I have even seen a class: inheritALL

None of this solution fits my idea of using django.

I might get the bull from the wrong side...

..which one is the right side?

cheers F

解决方案

Let's say you have "dark" and "light" versions of background. Your code may look like:

views.py:

...
if i_want_dark_version:
    context['style']='dark'
else:
    context['style']='light'

template.html:

<div id="titles-button" class="{{ style }}">
    ...
</div>

style.css:

#titles-button.dark h2 a {
    background: ...;
}
#titles-button.dark h2 a:hover {
    background: ...;
}

#titles-button.light h2 a {
    background: ...;
}
#titles-button.light h2 a:hover {
    background: ...;
}

这篇关于Django动态css实现：只有一个项目动态变化（背景）。如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！