jQuery hover事件失效求助：悬停div添加类功能无法实现

首先，最关键的错误出在你的jQuery代码里：

在使用addClass()和removeClass()方法时，类名不需要带.前缀。你现在写的addClass('.dot-nav--link')会把.dot-nav--link当成一个包含点字符的类名（也就是实际要添加的类是\.dot-nav--link），这显然不是你想要的。修正后的代码应该是：

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

其次，就算修正了类名问题，你会发现加上dot-nav--link类后，元素还是看不见——因为这个类里设置了visibility: hidden和opacity: 0。你需要调整CSS，让当#page0拥有这个类时，元素能显示出来：

.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; 
}
/* 添加这个规则，让拥有类的元素显示 */
#page0.dot-nav--link {
  visibility: visible;
  opacity: 1;
  transform: translate(0, -50%); /* 可选：调整位置让它显示在正常区域 */
}
.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; 
  position: relative; /* 可选：因为.dot-nav--link用了absolute，父元素需要relative来定位 */
}

另外补充一点：如果dot-nav--link是一个独立的导航元素（不是给#page0本身加的类），那你可能搞错了操作对象——应该是在#page0悬停时，给它内部的那个导航元素添加类，而不是给#page0自己加。比如假设导航元素是#page0 .dot-nav，那代码应该改成：

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

这样逻辑会更合理，毕竟dot-nav--link的样式看起来是一个悬浮提示框的样子，更适合作为子元素。

内容的提问来源于stack exchange，提问作者Jamie