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

Question

我正在编写一些代码，它看起来不错，但是 cursor 在 hover 超过 element 时没有更新为 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

hoverText class 应该应用于 div 元素而不是 "Name - Bob" 的第一个 span 元素。

我已经复制了您的代码并进行了以下更改。

.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 hoverText" id=
"searchProgramsResult1">
      <span class = "programName" 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>

Answer 2

您正在为这些元素使用 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

Answer 3

使用包装器来容纳固定元素。

结构上还有一些小改进，自己看吧

（fixed/absolute 元素很棘手，在使用它们之前阅读文档）

您的悬停（指针）由于堆叠而不起作用，将这些元素的 z-index 设置为 1，您会看到它起作用了。

.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;
  line-height: 100px;
  font-size: 28px;
  color: #47BC47;
  font-weight: 500;
}

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

.searchProgramsAdditional2 {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  line-height: 100px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
}

.lastVisited {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  line-height: 100px;
  font-size: 28px;
  color: #707070;
  font-weight: 500;
}

.lastVisitedTime {
  font-family: 'Roboto', sans-serif;
  height: 100px;
  line-height: 100px;
  font-size: 28px;
  color: #D41B1B;
  font-weight: 500;
  cursor: default;
}

.hoverText {
  display: inline-block;
}

.hoverText:hover {
  background: lightgray;
  cursor: pointer !important;
}

.wrapper {
  width: 100%;
  text-align: center;
  position: fixed;
}

.lastVisitedWrapper {
  margin-left: 50px;
}

<div class="searchProgramsResultTab" id="searchProgramsResult1">
  <span class="programName hoverText" id="programName1">Name - Bob</span>
</div>

<div class="wrapper">
  <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="lastVisitedWrapper">
    <span class="lastVisited">Last visited: </span>
  <span class="lastVisitedTime">Never</span>
  </span>
</div>


<pre>
1
2
3
21
312
3
12
3
123
213
123
123
12
1
2
3
21
312
3
12
3
123
213
123
123
12
1
2
3
21
312
3
12
3
123
213
123
123
12
1
2
3
21
312
3
12
3
123
213
123
123
12
1
2
3
21
312
3
12
3
123
213
123
123
12
1
2
3
21
312
3
12
3
123
213
123
123
12
</pre>

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

Cursor is Not Changing When Hovering Over an Element

html

css

cursor