Question

我希望让我的荧光笔（蓝色条）留在点击的元素上。我想保留悬停动画，但也包括让它保持在用户点击的<div>上的选项。非常感谢任何见解。

笔：https://codepen.io/chriskaram/pen/eGXrOp

<div class="demo">
<div class="demo__content">
    <h2 class="demo__heading">Assessment</h2>
    <div class="demo__elems">
        <div class="demo__elem demo__elem-1">Novice Assessment</div>
        <div class="demo__elem demo__elem-2">Apprentice Assessment</div>
        <div class="demo__elem demo__elem-3">Advanced Assessment</div>
        <span class="demo__hover demo__hover-1"></span>
        <span class="demo__hover demo__hover-2"></span>
        <span class="demo__hover demo__hover-3"></span>
        <div class="demo__highlighter">
            <div class="demo__elems">
                <div class="demo__elem">Novice Assessment</div>
                <div class="demo__elem">Apprentice Assessment</div>
                <div class="demo__elem">Advanced Assessment</div>
            </div>
        </div>
        <div class="demo__examples">
            <div class="demo__examples-nb">
                <div class="nb-inner">
                    <div class="example example-adv">
                        <div class="example-adv">
                            <div class="example-adv__top">
                                <div class="example-adv__top-search"></div>
                            </div>
                            <div class="example-adv__mid"></div>
                            <div class="example-adv__line"></div>
                            <div class="example-adv__line long"></div>
                        </div>
                    </div>
                    <div class="example example-web">
                        <div class="example-web__top"></div>
                        <div class="example-web__left"></div>
                        <div class="example-web__right">
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                        </div>
                    </div>
                    <div class="example example-both">
                        <div class="example-both__half example-both__left">
                            <div class="example-both__left-top"></div>
                            <div class="example-both__left-mid"></div>
                        </div>
                        <div class="example-both__half example-both__right">
                            <div class="example-both__right-top"></div>
                            <div class="example-both__right-mid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在这个例子中，我只关注sumParts。

点击此链接：https://codepen.io/anon/pen/GMbYdz

这些是要进行的修改：

CSS：

将demo__element-3添加到所有.active个样式（在css中） （即将demo__hover-3:hover添加到.demo__hover-3.active）

元素：

添加课程 .demo__hover-3:hover到active个元素 （在这种情况下，它变成了 demo__hover）的

Jquery：

如果用户点击它，添加jquery以向元素添加<span class="demo__hover demo__hover-3 active"></span>。

Answer 2

就像你点击一个选项时的bootstrap manu一样，它会在元素<li>中添加一个“active”类

CSS如何保持悬停元素到位

2 个答案: