移开鼠标指针后移除悬停效果

Question

移开鼠标指针后移除悬停效果

4

我正在尝试制作一些动画效果，其中一个菜单按钮在点击时会分裂成三个子菜单。我在这方面遇到了两个问题：

子菜单图标重叠在菜单图标上，然后开始移动。这是因为我已经按照这样的方式保留了JS代码，因为最近我想显示子菜单图标的移动。我知道原因，但无法解决它。
当单击菜单图标时，第三个子菜单的悬停效果仍然存在，并且只有在鼠标稍微移动后才消失。这是因为它的初始位置是鼠标点击的位置。我无法弄清楚如何防止这种情况发生。

HTML：

<ul class="list-inline">
   <li class="text-center admin-menu-item">
     <a id="applicationMenuBtn" class="User admin-menu-btn animates">
      <i class="app-master-data-icon admin-icon"></i><br />
          Application Master Data
     </a>
     <div class="dashboard-submenu-wrapper animates" id="applicationMenu">
     <a href="#/manageApplicationUser" class="dashboard-submenu-item dashboard-submenu-item-one animates">
      <i class="users-icon admin-sub-icon"></i><br />
      Users
     </a>
     <a href="#/manageProjects" class="dashboard-submenu-item dashboard-submenu-item-two animates">
      <i class="users-icon admin-sub-icon"></i><br />
      Create Project
     </a>
     <a href="#/manageUserMapping" class="dashboard-submenu-item dashboard-submenu-item-three animates">
      <i class="users-icon admin-sub-icon"></i><br />
       User Mapping
     </a>
    </div>
   </li>
</ul>

<div class="overlay"></div>

JS：

$(document).ready(function(){
$("#applicationMenuBtn").on('click', function(){
    var parentLi = $(this).parents('li');
    var adminMenu = parentLi.find('>div');
    var adminMenuBtn = parentLi.find('>a');
    adminMenuBtn.addClass('admin-menu-btn-animate').removeClass('admin-menu-reset');
    adminMenu.show().addClass('submenu-visible');
    $(".overlay").fadeIn();
    adminMenu.find('.dashboard-submenu-item-one').css('transform', 'translate(135%, -100%)');
    adminMenu.find('.dashboard-submenu-item-two').css('transform', 'translate(100%, 0)');
    adminMenu.find('.dashboard-submenu-item-three').css('transform', 'translate(54%, 100%)');
});

$(".overlay").on('click', function(){
    $(".overlay").fadeOut();
    $('.submenu-visible').fadeOut(200).removeClass('submenu-visible');
    $('.admin-menu-btn').removeClass('admin-menu-btn-animate').addClass('admin-menu-reset');
    $('.dashboard-submenu-item-one, .dashboard-submenu-item-two, .dashboard-submenu-item-three').css('transform', 'translate(0, 0)');
});
    });

CSS：

.overlay {
    position: fixed;
    display: none;
    background-color: rgba(0, 0, 0, 0);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.admin-menu-item {
    width: 150px;
    float: left;
    height: 100px;
    margin: 40px 14px;
    position: relative;
}

.admin-menu-item a {
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    color: #E50654;
}
.admin-icon {
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    display: inline-block;
    background-position: 13px 15px;
}

.admin-sub-icon {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    background-position: 0;
}

.app-master-data-icon,
.users-icon {
    background-image: url("http://www.icosy.com/images/icons/career_icon.png");
}
.admin-menu-item .dashboard-submenu-item i {
    width: 50px;
    height: 50px;
    line-height: 45px;
}
.dashboard-submenu-wrapper {
    display: none;
    z-index: 2;
}

.dashboard-submenu-item {
    display: inline-block;
    position: absolute;
    top: 33%;
    left: 17%;
    z-index: 2;
    color: #e50654;
    transform: translate(0%, 0%);
}

.dashboard-submenu-item:hover {
    color: blue;
}

.admin-menu-btn-animate {
    transform: scale(0.8) translateX(-20%) translateY(-5%);
    -ms-transform: scale(0.8) translateX(-20%) translateY(-5%); /* IE 9 */
    -webkit-transform: scale(0.8) translateX(-20%) translateY(-5%); /* Chrome, Safari, Opera */
}

.admin-menu-reset {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: translateX(0);
}

.animates {
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

这是一个Fiddle链接。

- Vibhor Dube

1

z-index应该解决这个问题。主要图标的z-index应该比突破动画图标更高。 - Deepak David

我已经尝试了z-index。显然，它没有解决问题。 :( - Vibhor Dube

1

非常好的问题。你找到答案了吗？ - w3spi

@DeepakDavid 无法将 position: relative; 应用于 applicationMenuBtn。这会破坏用户界面。请在 Fiddle 上尝试一下。 - Vibhor Dube

@ShaunakD，你做得很好。虽然第一个问题仍然没有解决，请把你的解决方案发布为答案。 :) - Vibhor Dube

显示剩余3条评论

2个回答

1

发布我的评论作为答案，

这里的解决方法可以通过在每个过渡事件中调整z-index来进行微调。

注意以下CSS更改更新的示例

.hoverTweak{    //new class
    z-index: 2 !important;
}

.dashboard-submenu-item {
    display: inline-block;
    position: absolute;
    top: 33%;
    left: 17%;
    z-index: 0;            //change
    color: #e50654;
    transform: translate(0%, 0%);
}

- Shaunak D

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashish Kumar · Accepted Answer

我认为问题在于你所采用的方法。我看到HTML和CSS非常复杂，还有JS。简化它可以解决问题。

我不擅长CSS动画，所以我没有像你一样实现相同的效果，但我做了类似的事情，而且没有问题。尝试这个，也许你会得到解决方案。

JS Fiddle: http://jsfiddle.net/ashishanexpert/gvqc3yn8/

$(function(){
    var $menuContainer = $("#container"),
        $defaultMenu = $menuContainer.find(".default"),
        $allMenuItems = $menuContainer.find(".nav");
    
    //
    function toggleMenu(){
        $allMenuItems.toggleClass("active");
    }
    
    //
    $defaultMenu.on("click", toggleMenu);
});

.container{
    position: relative;
}

.nav {
    background:#FFF url("http://www.icosy.com/images/icons/career_icon.png") top center no-repeat;
    color: #E50654;
    cursor: pointer;
    font:16px normal "Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 150px;
    padding: 90px 10px 10px;
    position: absolute;
    top: 100px;
    text-align:center;
    
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

.n1:hover, .n2:hover, .n3:hover {
    color: blue;
}

.nav.active{
    background-color: transparent;
    
    transform: scale(0.8) translateX(-20%) translateY(-5%);
    -ms-transform: scale(0.8) translateX(-20%) translateY(-5%); /* IE 9 */
    -webkit-transform: scale(0.8) translateX(-20%) translateY(-5%); /* Chrome, Safari, Opera */
}

.n1.active{
    top: 0;
    left: 80px
}

.n2.active{    
    left: 140px
}

.n3.active{
    top: 220px;
    left: 80px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" id="container">
    <div class="nav n1">Users</div>
    <div class="nav n2">Create Project</div>
    <div class="nav n3">User Mapping</div>
    <div class="nav default">Application Master Data</div>
</div>