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，并在标题中链接完整代码，也在主体中我的div上面，但它不起作用。我很确定我正确地引用了外部javascript文件，但我可能只是做了一些愚蠢的错误。有什么建议吗？

Answer 1

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

$(".rightarrow")

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

$("#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 hide / show函数切换css“display”属性，而不是“visibility”。所以我不得不将“visibility：hidden”更改为“display：none”。请注意，“visibility”属性会在页面呈现时产生更多开销，因此请避免在不需要的地方使用它，并且在适用的地方更喜欢“显示”。

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

Answer 2

有几件事：

您的HTML中没有框。
使用.或#分别按类或标识选择元素，但不能同时选择两者。 $('.#rightarrow')无效。
要隐藏您要使用jQuery显示的内容，请使用display: none;而不是visibility。
如果您想在jsFiddle中使用jQuery，请将其添加为框架。

Have a look at this update :)

Answer 3

首先需要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>

示例：http://jsfiddle.net/dUbUP/21/

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

3 个答案: