使用 Alpine JS 将鼠标悬停在下拉菜单上

Question

我想构建一个在鼠标悬停时显示并显示元素的菜单：类别： - 子类别 1 - 子类别 2

我设法做到了这一点，但我的问题是，当我将鼠标悬停在菜单上并且它显示了里面的元素并且我将鼠标从菜单本身移开时，元素不会隐藏。

这是我的代码：

<div x-data="{open: false}">
    <button @mouseover="open = true">Category</button>
    <div x-show="open" @mouseout="open = false" class="h-80 bg-red-900">
        <ul>
            <li>Sub-category 1</li>
            <li>Sub-category 2</li>
        </ul>
    </div>
</div>

Answer 1

在外面使用@mouseover.away = "open = false"div

Answer 2

不要使用 mouseout 事件。在外面使用 mouseleave div。

这是对我来说效果很好的解决方案。

<div x-data="{ open: false }" class="ml-4" @mouseleave="open = false">
        <button @mouseover="open = true" class="border border-primary-900">Category</button>
        <div x-show="open" class="h-80 bg-red-900">
            <ul>
                <li>Sub-category 1</li>
                <li>Sub-category 2</li>
            </ul>
        </div>
    </div>

示例：

The following example illustrates the difference between mouseout and mouseleave events. The mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the targeted element orange when the mouse exits it.

When you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying .

let test = document.getElementById("test");

// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", function( event ) {
  // highlight the mouseleave target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);

// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener("mouseout", function( event ) {
  // highlight the mouseout target
  event.target.style.color = "orange";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

来源：您可以查看有关 difference between mouseout and mouseleave

的更多详细信息

Answer 3

mouseout 事件在鼠标指针离开任何子元素以及所选元素时触发。

mouseleave 事件仅在鼠标指针离开所选元素时触发。

测试一下：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
x = 0;
y = 0;
$(document).ready(function(){
  $("div.over").mouseout(function(){
    $(".over span").text(x += 1);
  });
  $("div.enter").mouseleave(function(){
    $(".enter span").text(y += 1);
  });
});
</script>
</head>
<body>

<p>The mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.</p>
<p>The mouseleave event is only triggered when the mouse pointer leaves the selected element. </p>

<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
  <h3 style="background-color:white;">Mouseleave event triggered: <span></span></h3>
</div>

</body>
</html>

正如 OLIVIERS 所建议的，这是一个很好的解决方案：

<div x-data="{ open: false }" class="ml-4" @mouseleave="open = false">
    <button @mouseover="open = true" class="border border-primary-900">Category</button>
    <div x-show="open" class="h-80 bg-red-900">
        <ul>
            <li>Sub-category 1</li>
            <li>Sub-category 2</li>
        </ul>
    </div>
</div>

Christopher 的解决方案是利用 alpine 中的 .away 修饰符：

When the .away modifier is present, the event handler will only be executed when the event originates from a source other than itself, or its children.

This is useful for hiding dropdowns and modals when a user clicks away from them.

结合mouseover event

使用 Alpine JS 将鼠标悬停在下拉菜单上

Hover over dropdown with Alpine JS

html

javascript

alpine.js