Cursor is Not Changing When Hovering Over an Element

Question

I am working on some code, and it looks fine, but the cursor is not updating to a pointer when it hovers over the element. Here's my code:

.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>

Don't worry about the bad formatting, I just want to see why it is not changing the cursor.

Answer 1

You are using Position:fixed; for these elements. and giving them some padding.

.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;
}

This is your last element

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

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

This last element is overlapping on the other Elements

I have removed all the padding and put
breaklines to check the problem and cursor works Fiddle here