Как реализовать подсветку детей в дереве при наведении на div?

Question

[Boldy]

Имеется MPTTModel:

class TreeNode(MPTTModel):

    parent = TreeForeignKey('self', verbose_name='ID пригласившего', null=True, blank=True, related_name='children')
    @property
    def first_line(self):
        return self.get_relative_level(1, newbies_only=False).order_by('first_parent_rewarded')

    @property
    def second_line(self):
        return self.get_relative_level(2, newbies_only=False).order_by('second_parent_rewarded')

    def get_relative_level(self, level):
       return self.get_descendants().filter(level=self.get_level() + level)

А также шаблон:

<div class="first_line col-md-1">
            <p class="hint">1 линия</p>
            {% for child in user.treenode.first_line %}
            <div class="cell">
                <p>{{ child }}</p>
            </div>
            {% endfor %}
        </div>

        <div class="second_line col-md-1">
            <p class="hint">2 линия</p>
            {% for child in user.treenode.second_line %}
            <div class="cell">
                <p>{{ child }}</p>
            </div>
            {% endfor %}
        </div>

То есть, second_line - это сумма всех first_line своего first_line

Как сделать так, чтобы при наведении (hover) на div class="cell" первой линии посвечивались его дети во второй линии?

Answer 1

[Вадим Белкин]

Подсветку при наведение именно на .cell первой линии можно только через js сделать.
С помощью CSS можно сделать подсветку при наведение на весь .first_line Пример