DIV出現在懸停的鏈接後面？ - jquery/js

我已經閱讀了10+這裏的答案，但我仍然無法使用jquery使其工作！我對JavaScript/jquery很新，所以我遇到了很多問題。任何幫助，將不勝感激！DIV出現在懸停的鏈接後面？ - jquery/js

我有一個小圖像，當我將鼠標懸停在它上面時，我需要一個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文件，但我可能只是在做一些愚蠢的錯誤。有什麼建議麼？

來源

2013-04-22 shanling

我看不到HTML中的'＃rightbox'元素。 – Eli 2013-04-22 09:00:33

你引用的jQuery函數的類名，如元素：

$(".rightarrow")

時，你應該使用引用作爲ID，如你在CSS中做：

$("#rightarrow")

它不要求你嚴格使用id或classname，但是你應該在css和jquery函數中使用一致的選擇器。

- 編輯 -

這就是：

HTML

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

$(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-22 08:51:26 LittleSweetSeas

感謝您的及時迴應！我只是改變了這些，但它仍然不工作:( – shanling 2013-04-22 08:53:38

複製粘貼所有這些:(仍然沒有工作。也許我的其他代碼有一些與它衝突 – shanling 2013-04-22 09:07:52

你在JSFiddle中添加了JQuery框架嗎？它缺少。http：/ /jsfiddle.net/WkAyE/ – LittleSweetSeas 2013-04-22 09:08:22

幾件事情：

。在你的HTML沒有框。
使用.或#分別按類別或標識選擇元素，但不是兩者都選。 $('.#rightarrow')無效。
要隱藏您想要使用jQuery顯示的內容，請使用display: none;而不是visibility。
如果您想在jsFiddle中使用jQuery，請將其添加爲框架。

Have a look at this update :)

來源

2013-04-22 09:04:58 Supr

首先需要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-22 09:15:50

DIV出現在懸停的鏈接後面？ - jquery/js

回答

相關問題