如何使.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。我没有theese所以我使用了fa-code。
• 鼠标移出功能缺少<i...></i>内容的引号，这是一个脚本错误。

css特异性

在修复所有theese后，悬停工作，但fcc-hover样式没有。 使用调试工具检查p元素显示了最新进展：

将鼠标悬停在图标上会添加fcc-hover类

但忽略.fcc-hover样式规则

这是因为 css选择器特异性

特异性决定哪个选择器在具有冲突样式时获胜，例如＆＃34; 20px绿色文本＆＃34;和＆＃34; 10px灰色文字＆＃34;

.fcc和.fcc-hover具有相同的特异性，因为它们都是1类选择器。我不会在这里解释整个主题，但基本顺序是＆＃34; ID选择器＆＃34; #someID，.fcc之类的类选择器，最后是p等类型选择器

一个id将赢得任意数量的类选择器，但在每个类别中更多选择器获胜，因此2个类选择器比一个类选择器更强。 当两个选择器相同时，css中的顺序决定。 .fcc最后，.fcc获胜。

为了解决这个问题，我使用了＆＃34; .fcc.fcc-hover＆＃34;因为2类选择器强于1

<强>闪烁 更改字体大小会使文本来回闪烁，因为元素会在鼠标下发生变化。要避免这种情况，你必须确保元素大小和位置不会因为fcc-hover类而改变。