Question

我使用jquery使id“hover-b”仅在将鼠标悬停在ID为“hover-a”的元素上时才起作用。我将hover-a id添加到导航栏中的下拉列表和下面的整个页面navbar位于id为hover-b的div中。当用户使用这两个ID悬停在导航栏中的链接上时，下面的整个页面都会消失，并且用户的焦点会被强行转移到下拉列表中，该列表在某些在线商店和精品店（如amazon.com）中显示。这是我的代码。

$(function(){$("#hover-a").hover(function(){
    $("#hover-b").css("background-color","#222222"),
    $("#hover-b").css("-moz-opacity","0.1"),
    $("#hover-b").css("opacity","0.1"),
    $("#hover-b").css("filter","alpha(opacity=10)")},
function(){$("#hover-b").css("background-color","#ffffff"),
           $("#hover-b").css("-moz-opacity","1.0"),
           $("#hover-b").css("opacity","1.0"),
           $("#hover-b").css("filter","alpha(opacity=100)")})});

我的问题是，由于某种原因，hover-a id不适用于导航栏中的多个链接。我使用jquery，因为我找不到一个css解决方案来按照我想要的方式链接两个id。如果你可以修复我的jquery那么棒，但是如果你有一个完全不同的替代方案，最好只用css替代，这也是非常受欢迎的。

我希望我在这里想要实现的目标非常明确。请忽略任何不良英语。任何人都可以给予任何帮助非常感谢。提前全部谢谢。

Answer 1

每个HTML页面只能使用1个ID，这意味着在您的页面上，您可以拥有一个id="hover-a" 元素，只需一次。 [ID是全局属性]。 1

我将hover-a id添加到导航栏中的下拉列表

这意味着您不止一次使用相同的ID破坏HTML页面。解决方案是简单地将所有hover-a从id更改为class，并将其用于jquery：

$(".hover-a").hover(function () {
    $(".hover-b").css({
        "background-color": "#222222",
        "-moz-opacity": "0.1",
        "opacity": "0.1",
        "filter": "alpha(opacity=10)",
    });

    $(".hover-b").css({
        "background-color": "#ffffff",
        "-moz-opacity": "1.0",
        "opacity": "1.0",
        "filter": "alpha(opacity=100)"
    });
});

我在你的jquery上所做的是将所有ID更改为类并一次编辑所有css属性，如here所述

Jquery id不能用于多个链接

1 个答案: