悬停在元素上时光标不会改变

Question

我正在处理一些代码，它看起来很好，但cursor pointer在hover element之后没有更新到.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

不要担心格式错误，我只是想知道为什么它不会改变var client = QueueClient.CreateFromConnectionString(connectionString, queueName); BrokeredMessage message = new BrokeredMessage(); while ((message = client.Receive(new TimeSpan(hours: 0, minutes: 0, seconds: 30))) != null) { Console.WriteLine(string.Format("Message received: {0}, {1}, {2}", message.SequenceNumber, message.Label, message.MessageId)); message.Complete(); Console.WriteLine("Processing message (sleeping...)"); Thread.Sleep(1000); } Console.WriteLine("Finished listening Press ENTER to exit program"); Console.ReadLine(); 。

Answer 1

hoverText类应该应用于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

您正在对这些元素使用位置：固定; 。并给他们一些填充。

.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

使用包装来固定固定元素。

结构上也有一些小改进，请亲自看看。

（固定/绝对元素很棘手，在使用它们之前阅读文档）

由于堆叠，你的悬停（指针）无法正常工作，请为这些元素将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>