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

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) { 然后重新写所有函数..