html - 将鼠标悬停在元素上时光标没有改变

Question

我正在编写一些代码，它看起来不错，但是 cursor 在 hover 上时没有更新为 pointer 元素。这是我的代码:

.searchProgramsResultTab {
  font-family: 'Roboto', sans-serif;
  background-color: #DADBDB;
  height: 100px;
  line-height: 100px;
  padding-left: 10px;
  margin-top: -1px;
  font-size: 28px;
  color: #2BC2D3;
  font-weight: 500;
  display: inline-block;
  border: 3px groove #686868;
}
.searchProgramsAdditional1 {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  padding-left: 300px;
  line-height: 100px;
  font-size: 28px;
  color: #47BC47;
  font-weight: 500;
  position: fixed;
}
.searchProgramsBar {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  padding-left: 500px;
  line-height: 100px;
  font-size: 38px;
  color: #0F0F0F;
  font-weight: 500;
  position: fixed;
}
.searchProgramsAdditional2 {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  padding-left: 550px;
  line-height: 100px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
  position: fixed;
}
.lastVisited {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  padding-left: 950px;
  line-height: 100px;
  font-size: 28px;
  color: #707070;
  font-weight: 500;
  position: fixed;
}
.lastVisitedTime {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  padding-left: 1105px;
  line-height: 100px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
  position: fixed;
  cursor: default;
}
.hoverText:hover {
  cursor: pointer;
}

<div class = "searchProgramsResultTab" id = "searchProgramsResult1">
      <span class = "programName hoverText" id = "programName1">Name - Bob</span>
      <span class = "searchProgramsAdditional1 hoverText" id = "searchProgramsAdditional11">Save for later</span>
      <span class = "searchProgramsBar"> - </span>
      <span class = "searchProgramsAdditional2 hoverText" id = "searchProgramsAdditional12">Report a bug</span>
      <span class = "lastVisited">Last visited: </span><span class = "lastVisitedTime">Never</span>
    </div>

不用担心格式错误，我只是想看看为什么它没有改变 cursor。

Answer 1

您正在为这些元素使用 Position:fixed;。并给他们一些填充。

.searchProgramsAdditional1 {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 28px;
  color: #47BC47;
  font-weight: 500;
  position: fixed;
}
.searchProgramsBar {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 38px;
  color: #0F0F0F;
  font-weight: 500;
  position: fixed;
}
.searchProgramsAdditional2 {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
  position: fixed;
}

这是你的最后一个元素

.lastVisited {
  font-family: 'Roboto', sans-serif;
  height: 100px;

  line-height: 100px;
  font-size: 28px;
  color: #707070;
  font-weight: 500;
  position: fixed;
}

最后一个元素与其他元素重叠

我已删除所有填充并放置
分隔线以检查问题和光标是否正常工作 Fiddle here