如何使 .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(...) 仅检查元素是否具有给定的 class 和 returns true 或 false。
hasClass(...)、addClass(...) 和 removeClass(...) 不使用 .some-class 或 div#someId 这样的选择器。这些函数仅采用 class 名称作为字符串，不带前导点。
html使用fa-free-code-camp，js使用fa-freecodecamp。我没有这些，所以我用 fa-code 代替。
鼠标移开功能在 <i...></i> 内容周围缺少引号，这是一个脚本错误。

css特异性

在修复所有这些问题后，悬停有效，但 fcc-hover 样式无效。使用调试工具检查 p 元素显示发生了什么：

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

但是 .fcc-hover 样式规则被忽略了

这是因为 css 选择器特异性

特异性确定选择器具有冲突样式时赢得哪些胜利，例如“绿色20px文本”和“灰色10px文本”

.fcc 和 .fcc-hover 具有相同的特异性，因为它们都是 1 class 选择器。我不会在这里解释整个主题，但基本顺序是“ID 选择器”#someID、class 选择器如 .fcc 最后键入选择器如 p

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

为了解决这个问题，我使用了“.fcc.fcc-hover”，因为 2 class 选择器比 1

选择器强

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

而改变

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

How to make .hover work properly in jQuery

jquery

jquery-hover

修复示例

css特异性