預覽時jQuery似乎不起作用

我對編碼非常陌生，所以我需要你們的幫助！我編寫了這些代碼來運行測試，但我似乎無法在Chrome中預覽時加載jQuery。（我用的Atom代碼）預覽時jQuery似乎不起作用

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Hello</title> 
    <link type="text/css" rel = "stylesheet" href = "stylesheet.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script type="text/javascript" src="script.js"></script> 

    </head> 

    <body> 
    <h1>Hello</h1> 
     <p>This is just a test</p> 

    <div></div> 
    </body> 
</html>

CSS

h1 { 
    color: #6D9CAE; 
    font-family: Futura; 
    font-size: 40px; 
    font-weight: lighter; 
} 

h2 { 
    color: #bb2025; 
    font-family: Futura; 
    font-size: 40px; 
    font-weight: lighter; 
} 

p { 
    color: #54748B; 
    font-family: Avenir; 
    font-size: 20px; 
    font-weight: bold; 
} 

div { 
    background-color: #223C4A; 
    height: 100px; 
    width: 100px; 
    border-radius: 100%; 
} 

.active { 
    background-color: #a5b000; 
}

的JavaScript

$(document).ready(function(){ 
    $('div').hover(function(){ 
    $('div').addClass('.active') 
    }); 
});

我試圖讓div時將鼠標懸停改變顏色但它不能工作。不知道我是否做了JavaScript的任何錯誤。我試圖從某處複製工作代碼（html，css，script），並使用chrome和safari預覽它，這也不起作用。

那麼，如何讓腳本在預覽時工作？

謝謝！

來源

2016-01-19 Chicky Egg

addClass與removeClass走班不是CSS選擇器的名稱，所以這將是'addClass（‘活動’）「 –

」預覽「意味着什麼？你的意思是當你在瀏覽器中打開頁面？ – epascarello

請注意，雖然實現這種功能對於學習jQuery的人來說是一個好習慣，但改變懸停的顏色（或其他樣式）只需使用CSS即可完成，無需任何JavaScript。 – nnnnnn

您需要刪除'。'從「主動」當你使用」 .addClass'

試試這個：

$(document).ready(function(){ 
    $('div').hover(function(){ 
    $('div').addClass('active'); 
    }); 
});

來源

2016-01-19 23:28:59 jhawes

預覽時jQuery似乎不起作用

回答

相關問題