更新

Question

在我的网站上，我有一个具有某些功能和动画的菜单：

在鼠标翻转时，除了悬停在上面的那个元素之外，菜单的所有元素的不透明度都会发生变化。
点击某个元素时，会通过保留其颜色并降低未点击元素的不透明度来标记。
单击元素时，菜单向左移动（已解决）
单击元素时滑块会淡入。（解决）

现在所有这些功能都运行良好，但问题是它们可以通过单击菜单及其上方来激活，而不仅仅是在元素上。是否可以修复所有功能（不更改它们）只需单击菜单中的元素即可激活？

JSFIDDLE：https://jsfiddle.net/atkumqpk/1/

菜单的HTML：

<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>bbbbbbb</button>
        </li>
        <li id="item3">
            <button>ccccccc</button>
        </li>
        <li id="item4">
            <button>dddddddd</button>
        </li>
        <li id="item5">
            <button>eeeeeee eee.</button>
        </li>
        <li id="item6">
            <button>ffffff</button>
        </li>
        <li id="item7">
            <button>ggggggg</button>
        </li>
    </ul>
</div>

Answer 1

在你的js中有一个功能：

$(".menu").on("click", function () {
    $(".menu").addClass('permahover');

});

将激活器更改为.menu button：

$(".menu button").on("click", function () {
    $(".menu").addClass('permahover');

});

更新

我建议花一些时间阅读常见的CSS方法。同样适用于您使用JQuery。

查看更新的fiddle。做了一些修改，但长话短说，无论你在<li>标签上应用某些风格/动画/动作，这应该是他们的<button>孩子。

仔细看看这里的css变化：

.headlines:hover li button, .headlines.active li button
.headlines button:hover, .headlines li button.active

Answer 2

这是一个不完美的解决方案，但却是一个开始。整体上可以更好地处理CSS。您可以在fiddle。

中查看此内容

.menu li {
position: relative;
/*top: 180px;
left: 0px;*/
}
.headlines li {
width:auto;margin-left: 0 !important
}

悬停实例和点击功能应该触发另一个div出现在＆＃39; li块上。或按钮本身。

通过点击它来拒绝激活菜单

2 个答案:

更新