可以在菜单周围单击菜单元素

Question

我有一个菜单，通过单击其中一个元素，它会执行移动动画加上突出显示单击的元素，以及悬停在元素上时不透明度的变化。但是我注意到，如果我点击菜单而不是on元素或将鼠标悬停在它周围，菜单动画（激活元素的移动，突出显示单击，并悬停不透明度）这三个都被激活。有什么帮助吗？

JSFIDDLE

HTML：

<div id="menu" class="menu">
   <ul class="headlines">
      <li id="item1"><button>aa</button></li>
      <li id="item2"><button>A</button></li>
      <li id="item3"><button>B        </button></li>
      <li id="item4"><button>C         </button></li>
      <li id="item5"><button>D   </button></li>
      <li id="item6"><button>E       </button></li>
      <li id="item7"><button>F       </button></li>
   </ul>
</div>

CSS：

li {
    list-style-type: none;
    font-size: 1.5em;
    padding-top: 8px;
    text-align:center;
    border-style: none;
}


.menu li {
    position: relative;
    top: 180px;
    left: 0px;
}
#item7 {
    transition: opacity .8s, left .8s ease-out;
    -moz-transition: opacity .8s, left .8s ease-out;
    -webkit-transition: opacity .8s, left .8s ease-out;
    -o-transition: opacity .8s, left .8s ease-out;
    margin-left:105px 
}
#item6 {
    transition: opacity 1s, left 1s ease-out;
    -moz-transition: opacity 1s, left 1s ease-out;
    -webkit-transition: opacity 1s, left 1s ease-out;
    -o-transition: opacity 1s, left 1s ease-out;
    margin-left: 95px;
}
#item5 {
    transition: opacity 1.2s, left 1.2s ease-out;
    -moz-transition: opacity 1.2s, left 1.2s ease-out;
    -webkit-transition: opacity 1.2s, left 1.2s ease-out;
    -o-transition: opacity 1.2s, left 1.2s ease-out;
    margin-left: 60px;
}
#item4 {
    transition: opacity 1.4s, left 1.4s ease-out;
    -moz-transition: opacity 1.4s, left 1.4s ease-out;
    -webkit-transition: opacity 1.4s, left 1.4s ease-out;
    -o-transition: opacity 1.4s, left 1.4s ease-out;
    margin-left: 123px;
}
#item3 {
    transition: opacity 1.6s, left 1.6s ease-out;
    -moz-transition: opacity 1.6s, left 1.6s ease-out;
    -webkit-transition: opacity 1.6s, left 1.6s ease-out;
    -o-transition: opacity 1.6s, left 1.6s ease-out;
    margin-left: 113px;
}
#item2 {
    transition: opacity 1.8s, left 1.8s ease-out;
    -moz-transition: opacity 1.8s, left 1.8s ease-out;
    -webkit-transition: opacity 1.8s, left 1.8s ease-out;
    -o-transition: opacity 1.8s, left 1.8s ease-out;
    margin-left: 130px;
}
#item1 {
    transition: opacity 2s, left 2s ease-out;
    -moz-transition: opacity 2s, left 2s ease-out;
    -webkit-transition: opacity 2s, left 2s ease-out;
    -o-transition: opacity 2s, left 2s ease-out;
    margin-left: 117px;
}

#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}

.permahover li {
    opacity: 1;
    left: -33%;
}
.headlines li {
    font-size:1.5em;
    color:#000000;
    transition: all 0.5s;
    cursor: pointer;
}
.headlines:hover li, .headlines.active li {
    /* PARENT HOVER */
    opacity:0.4;
    cursor: pointer;
    /* Dim all */
}
.headlines li:hover, .headlines li.active {
    /* SINGLE HOVER */
    opacity: 1;
    /* Max one */
    color:#000000;
    cursor: pointer;
}

JQUERY：

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

});


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

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

Answer 1

这是因为li元素是块元素并占用所有可用的水平空间。

尝试设置display：inline-block;并将它们定位不同或给它们宽度。

见下图：

Answer 2

将样式display: inline-block添加到li并将其放入div s。

http://jsfiddle.net/kvey3d12/13/