JavaScript:z-index 在第一次鼠标悬停后不会改变

JavaScript: z-index doesn't change after first mouseover

本文关键字：改变 悬停 鼠标 z-index 第一次 JavaScript      更新时间：2023-09-26

我试图允许用户滚动箭头，使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 错误！

任何帮助将不胜感激！ ：-）

海蒂

JS 

$(".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) {结合起来，然后再次编写所有函数。

相关文章：