Javascript Div出现在悬停时的链接后面？-Jquery/js

我已经在这里读了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/其他东西的JSFIDLE：

---

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

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

$(".rightarrow")

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

$("#rightarrow")

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

--编辑--

这是：

HTML

CSS

请注意，JQuery隐藏/显示函数切换css的“显示”属性，而不是“可见性”。 因此，我不得不将“可见性：隐藏”更改为“显示：无”。 请注意，“visibility”属性在呈现页面时会带来更多开销，因此请避免在不需要的地方使用它，并在适用的地方选择“display”

请阅读此处的差异：

---

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

$(".rightarrow")

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

$("#rightarrow")

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

--编辑--

这是：

HTML

CSS

请注意，JQuery隐藏/显示函数切换css的“显示”属性，而不是“可见性”。 因此，我不得不将“可见性：隐藏”更改为“显示：无”。 请注意，“visibility”属性在呈现页面时会带来更多开销，因此请避免在不需要的地方使用它，并在适用的地方选择“display”

请阅读此处的差异： 有几件事：

• HTML中没有框
• 使用
  或

  #

  分别按类或标识选择元素，但不能同时选择两者<代码>$（'.#右箭头'）无效
• 要隐藏要使用jQuery显示的内容，请使用

  display:none和非
  可见性

• 如果希望在JSFIDLE中使用jQuery，请将其添加为框架

有几件事：

• HTML中没有框
• 使用
  或

  #

  分别按类或标识选择元素，但不能同时选择两者<代码>$（'.#右箭头'）无效
• 要隐藏要使用jQuery显示的内容，请使用

  display:none和非
  可见性

• 如果希望在JSFIDLE中使用jQuery，请将其添加为框架

---

首先需要jquery脚本并使用此代码

$(document).ready(function(){
   //hide the rightbox
   $('#rightbox').hide();
      $("#rightarrow").hover(function () {
      //if mouse enter
      $('#rightbox').show();
   }, function(){
      //if mouse out
      $('#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: red;
opacity: 0.5;
white-space: nowrap;
top: 0%;
right: 0;
height: 100%;
width: 8%;
z-index: 5;
display:hidden;
position:absolute;
}

这是html代码

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

---

示例：

首先需要jquery脚本并使用此代码

$(document).ready(function(){
   //hide the rightbox
   $('#rightbox').hide();
      $("#rightarrow").hover(function () {
      //if mouse enter
      $('#rightbox').show();
   }, function(){
      //if mouse out
      $('#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: red;
opacity: 0.5;
white-space: nowrap;
top: 0%;
right: 0;
height: 100%;
width: 8%;
z-index: 5;
display:hidden;
position:absolute;
}

这是html代码

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

---

示例：

感谢您的及时回复！我刚刚更改了这些，但仍然不起作用：（复制粘贴了所有这些内容：（仍然不起作用。可能我的其他一些代码与我的代码冲突。你在JSFIDLE中添加了JQuery框架吗？它丢失了。我想我没有弄错，我有脚本src=“js/JQuery.js”在我的头标签中--我也在html文件的不同位置尝试过它。你检查过我上一条评论中的小提琴链接吗？它在那里工作！感谢你的及时回复！我刚刚更改了这些，但仍然不起作用：（复制粘贴了所有这些：（仍然不起作用。可能我的其他一些代码与我的代码有冲突。您是否在JSFIDLE中添加了JQuery框架？它丢失了。我想我的脚本src=“js/JQuery.js”是正确的在我的头标签中——我也在html文件的不同位置尝试过它。你检查了我上一条评论中的小提琴链接了吗？它在那里工作！我看不到html中的

\rightbox

元素。我看不到html中的

\rightbox

元素。