javascript - 悬停时 Div 出现在链接后面？ - 查询/js

Question

我在这里阅读了 10 多个答案，但我仍然无法使用 jquery 让它工作!我对 javascript/jquery 还很陌生，所以我遇到了很多问题。任何帮助将不胜感激!

我有一个小图片，当我将鼠标悬停在它上面时，我需要一个 100% 高度的框出现在它后面(类似于在 Google Chrome 中打开新标签时的向左箭头)。这是我的 CSS:

#rightarrow {
    background: url("images/rightarrow.png") no-repeat;
    white-space: nowrap;
    top: 45%;
    right: 3%;
    height: 73px;
    width: 25px;
    position: fixed;
    z-index: 6;
}

#rightbox {
    background-color: #ffffff;
    opacity: .5;
    white-space: nowrap;
    top: 0%;
    right: 0%;
    height: 100%;
    width: 8%;
    position: fixed;
    z-index: 5;
    display: none;
}

这是我的 jquery/其他东西的 jsfiddle: jsfiddle

如有任何帮助，我将不胜感激!我已经尝试在外部样式表中链接我的 javascript，也在带有完整代码的 header 中，以及在主体中的 div 上方链接我的 javascript，但它不起作用。我很确定我正确地引用了外部 javascript 文件，但我可能只是犯了一些愚蠢的错误。有什么建议吗？

Answer 1

您将 JQuery 函数中的元素作为类名引用，例如:

$(".rightarrow")

当您应该像在 css 中那样使用引用作为 id 时:

$("#rightarrow")

不要求严格使用 id 或 classname，但在 css 和 jquery 函数中应使用一致的选择器。

--编辑--

这里是:

HTML

<a href="#" id="rightarrow">test</a>
<div id="rightbox"></div>

JS

$(function(){
    $("#rightarrow").hover(function (e) {
        $("#rightbox").show();
    },
         function (e) {
        $("#rightbox").hide();
    });
}); 

CSS

#rightarrow {
    background: url("images/rightarrow.png") no-repeat;
    white-space: nowrap;
    top: 45%;
    right: 3%;
    height: 73px;
    width: 25px;
    position: fixed;
    z-index: 6;
}

#rightbox {
    background-color: #fff000;
    opacity: .5;
    white-space: nowrap;
    top: 0%;
    right: 0;
    height: 100%;
    width: 8%;
    position: fixed;
    z-index: 5;
    display:none;
}

请注意，JQuery 隐藏/显示函数切换 css“显示”属性，而不是“可见性”。 所以我不得不将“visibility:hidden”改为“display:none”。 请注意，“visibility”属性会增加页面呈现的开销，因此请避免在不需要的地方使用它，而在适用的地方更喜欢“display”。

阅读这里的区别: http://www.w3schools.com/css/css_display_visibility.asp