Question

我正在尝试允许用户翻转箭头，这使得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的新手，请原谅任何新的错误！

非常感谢任何帮助！： - ）

海蒂

Answer 1

<强> 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) {合并，然后再次编写所有函数。

JavaScript：首次鼠标悬停后z-index不会更改

1 个答案: