JavaScript：第一次鼠标悬停后 z-index 不会改变答案

【问题标题】：JavaScript: z-index doesn't change after first mouseoverJavaScript：第一次鼠标悬停后 z-index 不会改变
【发布时间】：2014-01-05 13:20:15
【问题描述】：

我试图让用户翻转箭头，使 div 出现在下方（即使鼠标悬停后仍保留在那里）。我取得了一些成功，但碰壁了。

它只能从左到右工作，如果我想将鼠标悬停在左侧的箭头上并且我已经将鼠标悬停在右侧的箭头上，这是不可能的。

代码如下：

$(".business-strategy").one("mouseover", function() {

    $(".business-strategy2").css("z-index", "10");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "-1");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
});

$(".accelerating-innovation").one("mouseover", function() {

    $(".business-strategy2").css("z-index", "-1");
    $(".accelerating-innovation2").css("z-index", "10");
    $(".cloud-and-technical-services2").css("z-index", "-1");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
});

$(".cloud-and-technical-services").one("mouseover", function() {

    $(".business-strategy2").css("z-index", "-1");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "10");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
});

$(".procurement-and-supplier-services").one("mouseover", function() {

    $(".business-strategy2").css("z-index", "-1");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "-1");
    $(".procurement-and-supplier-services2").css("z-index", "10");
});

我对 JavaScript 很陌生，请原谅任何 newby 错误！

任何帮助将不胜感激！ :-)

海蒂

【问题讨论】：

请不要链接到您的网站。原因如下：meta.stackexchange.com/questions/125997/…
使用on 代替one。这就是one 的工作方式 - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
@diodeus 更好的选择是 jsFiddle。

标签： javascript css hover z-index mouseover

【解决方案1】：

$(".business-strategy").on("mouseenter", function() {

    $(".business-strategy2").css("z-index", "10");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "-1");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
 })
.mouseleave(function() {
    $(".business-strategy2").css("z-index", "10");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "-1");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
 });
$(".accelerating-innovation").on("mouseenter", function() {

   $(".business-strategy2").css("z-index", "-1");
   $(".accelerating-innovation2").css("z-index", "10");
   $(".cloud-and-technical-services2").css("z-index", "-1");
   $(".procurement-and-supplier-services2").css("z-index", "-1");
}).mouseleave(function() {
   $(".business-strategy2").css("z-index", "-1");
   $(".accelerating-innovation2").css("z-index", "10");
   $(".cloud-and-technical-services2").css("z-index", "-1");
   $(".procurement-and-supplier-services2").css("z-index", "-1");
 });

$(".cloud-and-technical-services").on("mouseenter", function() {
    $(".business-strategy2").css("z-index", "-1");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "10");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
}).mouseleave(function() {
    $(".business-strategy2").css("z-index", "-1");
    $(".accelerating-innovation2").css("z-index", "-1");
    $(".cloud-and-technical-services2").css("z-index", "10");
    $(".procurement-and-supplier-services2").css("z-index", "-1");
 });

$(".procurement-and-supplier-services").on("mouseenter", function() {
   $(".business-strategy2").css("z-index", "-1");
   $(".accelerating-innovation2").css("z-index", "-1");
   $(".cloud-and-technical-services2").css("z-index", "-1");
   $(".procurement-and-supplier-services2").css("z-index", "10");
}).mouseleave(function() {
   $(".business-strategy2").css("z-index", "-1");
   $(".accelerating-innovation2").css("z-index", "-1");
   $(".cloud-and-technical-services2").css("z-index", "-1");
   $(".procurement-and-supplier-services2").css("z-index", "10");
 });

或者

你可以结合$(document).on('mouseenter mouseleave', '.classname', function (ev) {然后重新编写所有函数..

【讨论】：

简单到拼写错误！谢谢 - 我整天都在挠头！海蒂。
mouseleave真的有必要吗？
您可以像我建议的那样将 mouseleave 与 mouseenter 结合起来，而不是再次编写它们。但是，是的，mouseleave 确实很有必要，因为当鼠标不在任何按钮上时就会发生这种情况。 - 保持当前状态