Question

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

在鼠标翻转时，菜单中所有元素的不透明度发生变化，但上面悬停的元素除外。
点击某个元素时，会通过保留其颜色并降低未点击元素的不透明度来标记。

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

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

菜单的HTML：

<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>bbbbbbb</button>
        </li>
    </ul>
</div>

Answer 1

只需尝试直接向按钮添加事件处理程序，而不是<li>元素：

$(window).load(function () {

...

function AddEventHandlers()
{
        var btns = $('button');  // all buttons (set and use id or class
                                 // if you've other buttons on this page)


        for (int i = 0;i < btns .length; i++) {
            btns[i].click(function() {
                // your logic here;
            });
        }; 
};

    AddEventHandlers();
...

});

Answer 2

检查此fiddle，看起来问题出现在你的css中：

.menu li {
    position: relative;
    top: 180px;
    left: 0px;
}

由于这个规则，你的li项目被向下移动了，但是在chead上触发了chead（ul元素），这个位置比它的子元素高出180px，所以当鼠标高于你的菜单时你会改变不透明度项目。并且你的ul元素宽度是100％，它的子元素宽度是相同的（不包括边距），所以当你的实际文本菜单的左边或右边是鼠标时，你的不透明度也会改变。

Answer 3

我还对你的小提琴进行了更新：

<强> updated Fiddle

我的解决方案是删除<LI>元素的点击事件处理程序，并将其替换为按钮的点击和悬停事件：

只需要对css进行两次最小的更改。

这个solition的优势（而不是依赖于.headlines：hover-selector）是你的按钮在它们之间可以有不同的大小和空格。用于触发悬停样式的区域将始终是按钮区域，而不是周围<li>的大小

// Removed Code

/*
var $li = $('.headlines li').click(function () {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});
*/

// Added Code

var $headlines = $('.headlines');
var $headlinesLi = $('.headlines li');


$('.headlines button').each(function() {        //iterate over every 'button' in '.headlines':

    var $thisButton = $(this);                  // save (cache) the current jQuery-Button-Object
    var $parentLi=$thisButton.parent();         // save (cache) the parent <LI>
    var state = false;                          // set initial button-state to false


    $thisButton.click(function(){               // click-handler for the current Button:

        state = !state;                         // invert 'state'
        $headlinesLi.removeClass('active');     // remove .active-class on every <LI>
        $parentLi.toggleClass('active',state);  // set/remove .active-class on buttons parent <LI> as indicated by 'state'
        $headlines.toggleClass('active',state); // set/remove .active-class on .headlines indicated by 'state'

    });

    $thisButton.hover(                          //hover-handler for the current Button:

        function () {                           // routines for mouse-enter like events:
            $parentLi.addClass('hover');        // add .hover-class to buttons parent <LI>
            $headlines.addClass('hover');       // add .hover-class to .headlines
        },

        function () {                           // routines for mouse-leave like events:
            $parentLi.removeClass('hover');     // remove .hover-class to buttons parent <LI>
            $headlines.removeClass('hover');    // remove .hover-class to .headlines
        }

    );
});

这会在.hover和您的按钮父.headlines元素上添加和删除<li>个类。

在CSS中，您只需要在选择限定符中从:hover伪selektor切换到.hover类。

所以转自：

.headlines:hover li, .headlines.active li {
/* PARENT HOVER */
...

.headlines li:hover, .headlines li.active {
/* SINGLE HOVER */
...

到

.headlines.hover li, .headlines.active li {
/* PARENT HOVER */
...

.headlines li.hover, .headlines li.active {
/* SINGLE HOVER */
...

瞧。

Answer 4

这是udpated小提琴：

[https://jsfiddle.net/atkumqpk/23/][1]

这是因为您要在脚本和css中针对所有事件（单击和悬停）定位li元素。改为将css更改为目标按钮。更改按钮的不透明度。给：按钮而不是li的悬停样式。你的li也不需要指针光标，但是按钮可以。

仅通过单击元素

4 个答案: