jQuery / SASS悬停不起作用[关闭]答案

【问题标题】：jQuery/SASS hover not working [closed]jQuery / SASS悬停不起作用[关闭]
【发布时间】：2018-06-18 08:59:35
【问题描述】：

我正在尝试实现悬停，这样当我将鼠标悬停在 div 上时，就会激活一个类。下面是我的代码。

$("#page0").hover(
  function () {
    $(this).addClass('.dot-nav--link');
  }, 
  function () {
    $(this).removeClass('.dot-nav--link');
  }
  );

.dot-nav--link {
  position: absolute;
  top: 50%;
  visibility: hidden;
  transform: translate(-120%, -50%);
  width: 200px;
  padding: 5px 10px;
  opacity: 0;
  color: #111;
  background-color: #fff;
  transition: all .3s;
}
.dot-nav--link:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  transform: translateY(-50%);
}
#page0{
height: 80vw;
background: url("smarthome.JPG") no-repeat top center fixed;
background-size:cover;
margin-bottom: -9em;
}

我不知道为什么这不起作用。你有什么建议吗？

【问题讨论】：

从您的addClass() 和removeClass() 调用中删除.，即。 .addClass('dot-nav--link');。投票结束是一个错字。另请注意，直接在 CSS 中对悬停事件执行样式更改远更好。
@RoryMcCrossan 我删除了它并没有解决问题
你确定吗？考虑到您有限的代码示例，它可以正常工作：jsfiddle.net/jrsmcudb。请注意，由于 CSS 碎片化，布局在悬停时会变得混乱。
$ 未定义通常意味着 Jquery 未加载

标签： javascript jquery sass

【解决方案1】：

你应该删除.

$("#page0").hover(
  function () {
$(this).addClass('dot-nav--link');
  }, 
 function () {
$(this).removeClass('dot-nav--link');
 });

【讨论】：