jQuery / SASS悬停不起作用

时间:2018-01-09 10:36:27

标签: javascript jquery sass

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

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

1 个答案:

答案 0 :(得分:2)

您应该删除.

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