强制CSS的解决方法:转换后悬停以更新(打开菜单)

Question

强制CSS的解决方法:转换后悬停以更新(打开菜单)

解决这个问题已经有几个问题了.我包括我有两个原因:

它提出了一种可能的替代方案
演示代码可能对想要模拟菜单的其他人有用

在a之后CSS transition,用户必须在鼠标下方的元素注意到它处于某种:hover状态之前移动鼠标.我创建了一个菜单式功能,可以打开以显示不同的选项.打开过渡结束时鼠标下的选项与过渡开始时鼠标下的选项不同.因此,我必须找到一种解决方法.

你可以在这里找到一个jsFiddle和下面的演示源.寻找替代方法(在三个地方)看看我做了什么.

要查看此问题,请将鼠标移到菜单上,然后将其保留在原位,而不移动它.浏览器认为的列表项:hover将显示为蓝色.我的解决方法li:hover用li.ignoreHover类来否决规则.为了使变通方法不可见,我可以简单地使用标准背景颜色.相反,我使用蓝色使问题可见.

我的问题:我注意到,按修改键(Caps,Caps lock,Ctrl,Option/ Alt,⌘在Mac上,...)也将迫使:hover状态更新.有没有办法将这样的事件发送到#menu元素？

(我这样做的尝试并没有成功,所以我更倾向于给你我的工作解决方案而不是一个可能无效的解决方法).

<!DOCTYPE html>
<html>
<head>
 <style>
#menu {
  position: relative;
  background: #ccc;
  display: inline-block;
}
#wrapper {
  margin: 5px;
}
#logo {
  width: 150px;
  height: 50px;
  border: 1px solid #000;
  margin: 0px auto;
  z-index: 10;
}
nav {
  width: 100%;
  overflow: hidden;
  text-align:center;
  height: 2em;
}
ul {
  position: relative;
  display:inline-block;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  text-align:left;
}
li {
  display: block;
  margin: 0;
  padding:0.25em 0;
  line-height: 1.5em;
}
ul.animated, nav {
  transition: all 500ms linear 1s;
}
#menu.hover ul, #menu.hover nav {
  transition-delay: 0s;
}
li:hover,
li.hover {
  background-color: #999;
}
li.ignoreHover {
  background-color: #ccf; /* a touch of blue, so you can see it */
}
.selected {
  color: #fff;
}
 </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head>
<body>
<div id="menu">
  <div id="wrapper">
    <div id="logo"></div>
  </div>
  <nav>
    <ul>
      <li>Note one</li>
      <li>Note two</li>
      <li>Note three</li>
      <li>Not four much longer</li>
      <li>Note five</li>
      <li>Note six</li>
    </ul>
  </nav>
</div>

<script>
var test = {}
;(function createMenu() {
    var item = 3;
    var minPadding = 5;
    var hover = "hover" // class

    var $li = $("li");
    var $ul = $("ul");
    var $menu = $("#menu");
    var $nav = $("nav");

    var itemHeight = parseInt($li.outerHeight(), 10);
    var itemCount = $ul.children().length;
    var menuWidth = $menu.outerWidth(true);
    var padding = (menuWidth - $ul.width()) / 2;

    var transitionDone = false;
    var mouseOver = false;
    var top;

    // Pad the list items to fill the width of the menu
    if (padding < minPadding) {
        // Widen the menu to allow for the minimum padding
        menuWidth += (minPadding - padding) * 2;
        $menu.width(menuWidth);
        padding = minPadding;
    }

    $li.css({
        paddingLeft: padding,
        paddingRight: padding
    });

    // Scroll to the current selected item
    selectItem(true);

    function selectItem(scroll) {
        $ul.children().removeClass("selected");
        $ul.children().eq(item).addClass("selected");

        if (scroll) {
            top = -(itemHeight * item);
            $ul.css({
                top: top
            });
        }
    }

    // Wait until the initial settings are applied 
    // before animating the transitions
    setTimeout(function () {
        $ul.addClass("animated");
    }, 1);

    // Handle interaction with the menu
    $menu.on("mouseover", openMenu);
    $menu.on("mouseleave", closeMenu);
    $menu.on("transitionend", menuIsOpen);
    $ul.on("click", treatClickOnItem);

    // <WORKAROUND...
    var x
    var y
    // ... WORKAROUND>


  function openMenu(event) {

        if (mouseOver) {
            // This method may be called multiple times as the menu is
            // transitioning to its open state
            return
        }

    // <WORKAROUND...
    $menu.on("mousemove", function updateXY(event) {
            x = event.pageX
            y = event.pageY
    })
    // ... WORKAROUND>

        $menu.addClass(hover);
        transitionDone = false;
        mouseOver = true;

        $nav.css({
            height: (itemHeight * itemCount)
        });
        $ul.css({
            top: 0
        });
    }

    function menuIsOpen() {
        transitionDone = true;

      // <WORKAROUND...   
    var $hover = $("li:hover").addClass("ignoreHover")
    var $item = $(document.elementFromPoint(x, y))
    if (mouseOver) {
      $item.addClass(hover)
    }
    $menu.on("mousemove", function () {
      $item.removeClass(hover)
      $hover.removeClass("ignoreHover")
      $menu.off("mousemove")
    })
        //... WORKAROUND>

        if (!mouseOver) {
            closeMenu()
        }
    }

    function closeMenu() {
        mouseOver = false;
        if (transitionDone) {
            $menu.removeClass(hover)

            $nav.css({
                height: itemHeight
            });
            $ul.css({
                top: top
            });
        }
  }

    function treatClickOnItem(event) {
        item = $(event.target).index();
        top = -(itemHeight * item);
        selectItem();
        // DO MORE STUFF WITH THE SELECTION
    }
})()
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rok*_*jan 3

jsBin 演示

似乎几乎不可能:hover在动画时获取元素的状态。

从 CSS 中删除它:hover并
创建一个具有所需样式的类。 .hover使用 jQuery 来切换.hover：

$links.hover(function(){
  $(this).toggleClass("hover");
});

Run Code Online (Sandbox Code Playgroud)

现在回到你的问题：

为了在菜单打开后突出显示
正确的元素，我们需要始终知道鼠标的 Y 位置：

var mouseY = 0; // Needed to know the mouse position when menu is opening
$(document).on("mousemove", function( e ){
    mouseY = e.clientY; // Update the Y value
});

Run Code Online (Sandbox Code Playgroud)

现在，在折叠菜单悬停时，使用 jQuery 为菜单设置动画，
在animate step callback每一帧的每个链接位置中获取.filter()它们，通过定位与鼠标位置匹配的链接。
最后将.hover只应用于那个：

function openMenu() {
  $navUl.stop().animate({top: 0});
  $nav.stop().animate({height: linkH*nLinks}, {
    duration: 600,
    step: function( menuHeight ){
        // keeps removing and adding class during the animation time.
        // (it's an overkill but no other solution to that issue so far)
        $links.removeClass("hover").filter(function(i, e){
          var t = e.getBoundingClientRect().top;
          return mouseY > t  &&  mouseY < t+linkH;
        }).addClass("hover"); // only to the link returned by `.filter()` condition
    }
  });
}

Run Code Online (Sandbox Code Playgroud)

！重要提示：上述过滤将与您拥有的项目一样昂贵，因为在每个动画帧中它都会尝试获取位置。如果您发现速度缓慢 - 改进上述内容。

要
在每一帧回顾一下，检查鼠标clientX/Y坐标是否在元素的element.getBoundingClientRect()坐标/值内

归档时间：	10 年，8 月前
查看次数：	1311 次
最近记录：	10 年，6 月前