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

Posted 2021-05-04

我正在尝试实现悬停，以便当我将鼠标悬停在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;
}

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

答案

你应该删除.

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