如何使.hover在jQuery中正常工作

Question

我試圖做這樣的事情：

顯示一個圖標 - 懸停變成文本 - 在鼠標上再次變成一個圖標。

這裏是我（這工作不正常）：

HTML：

<p class="fcc"><i class="fa fa-free-code-camp fa-lg"></i></p> 

CSS：

.fcc-hover { 
    font-family: "Unica One", sans-serif; 
    font-size: 10px; 
    color: grey; 
} 

    .fcc { 
     margin-top: -37px; 
     font-family: "Raleway", sans-serif; 
     font-size: 20px; 
     color: #BADA55; 
    } 

的jQuery：

$('.fcc').hover(
     function() { 
     var newText = $(this).text('A Project for freeCodeCamp'); 
     newText.hasClass('.fcc-hover'); 
     }, function() { 
     $(this).removeClass('.fcc-hover'); 
     $(this).html(<i class="fa fa-freecodecamp fa-lg"></i>) 
     } 
    ); 

非常感謝您的幫助。

Answer 1

固定的例子

我得到了你的例子中的jsfiddle工作 https://jsfiddle.net/fvz70ne4/

有你的榜樣的幾個小問題：

• jQuery的hasClass(...)只有檢查如果一個元素具有給定的類並返回true或false。
• hasClass(...),addClass(...)和removeClass(...)不採用像.some-class或div#someId這樣的選擇器。這些函數只需要一個類名，作爲一個字符串，它不具有前導點。
• html使用fa-free-code-camp，js使用fa-freecodecamp。我沒有這些，所以我用fa-code代替。
• 鼠標移出功能缺少圍繞<i...></i>內容的引用，這是腳本錯誤。

CSS具體

固定所有theese懸停的作品後，但FCC-hover樣式沒有。使用 調試工具來檢查p元素顯示怎麼回事：

懸停在圖標增加了FCC的懸停類

但.fcc懸停樣式規則都將被忽略

這是因爲css選擇器特異性

特異性決定哪些選擇器在它們具有衝突樣式時獲勝，如「20px text i n綠色「和」10px文本灰色「

.fcc和.fcc-hover具有相同的特徵，因爲它們都是1類選擇器。我不會在這裏解釋這整個主題，但基本順序是「ID選擇」 #someID，類選擇像.fcc最後鍵入像p

一個ID選擇將贏得任意數量的類選擇，但在每個類別中更多的選擇所以2級選擇器比一級選擇器更強。 當兩個選擇器相同時，CSS中的順序決定。 .fcc最後，.fcc勝利。

爲了解決這個問題，我用「.fcc.fcc懸停」，因爲2類選擇強於1

閃爍 改變字體大小使文本閃爍來回因爲根據元件的變化你的鼠標。爲了避免這種情況，您必須確保元素的大小和位置不因fcc-hover類而改變。