I am looking to create a single CSS style that can dynamically change its background based on a Django variable. This becomes more challenging when dealing with a:hover.
The initial static style.css code appears as follows:
.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 that the background is currently commented out.
I want to implement this style within a DIV and update the background dynamically, like this:
{% 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 have tried my best with "X" but haven't been successful in making it work.
My requirements include: - Rewrite the entire style in X - Avoid using complex JavaScript solutions (on_mouse_over...) - Dismiss the use of a class: inheritALL
None of these solutions align with my goal of utilizing Django effectively.
I may be approaching the problem from the wrong angle...
... but which is the correct approach?
Cheers, F