0

我已经在这里阅读了 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 文件，但我可能只是犯了一些愚蠢的错误。有什么建议么？

4

3 回答 3

1

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

于 2013-04-22T09:15:50.737 回答
1

有几件事：

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

看看这个更新:)

于 2013-04-22T09:04:58.893 回答
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 隐藏/显示功能切换 css 的“显示”属性，而不是“可见性”。所以我不得不将“可见性：隐藏”更改为“显示：无”。请注意，“可见性”属性在页面呈现上会产生更多开销，因此请避免在不需要的地方使用它，并在适用的情况下首选“显示”。

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

于 2013-04-22T08:51:26.837 回答