Can't change current cursor

Question

I am doing a dropdown box, when my mouse hovers over a button it drops the box down and if the box hovers it will display the block but the problem is that I can't seem to change the cursor when the mouse is hovering over the dropdown box. It stays on pointer even though I want to have it on default.

Thank you.

css code:

.applesauce{
  text-align: right;
  margin-right: -0%;
  height: -10%;
  margin-top: -70%;
}
.applesauce button{
  text-align: right;
  margin-right: -18%;
  font-size: 200%;
  margin-top: 47%;
  font-style: italic;
  font-family: inherit;
  border: none;
  background-color: #3498DB00;
  color: #0d0d0d;
}
.applesauceDropdown button{
  text-align: right;
  margin-right: 8%;
  font-size: 110%;
  margin-top: 0%;
  font-style: italic;
  font-family: inherit;
  border: none;
  background-color: #3498DB00;
  color: #0d0d0d;
}
.applesauceDropdown{
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
  right: 23%;
}
.applesauce a{
  color: black;
  font-size: 110%;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.applesauce button:hover + .applesauceDropdown{
  cursor: default;
  display: block;
}
.applesauce button:hover{
  color: #666666;
}
.applesauceDropdown:hover{
  cursor: default;
  display: block;
}
.applesauceDropdown button:hover{
  color: #666666;
  cursor: pointer;
}

html code:

    <div class="applesauce">
    <button>Applesauce</button>
    <div class="applesauceDropdown">
      <a href="#">applesauce</a>
      <button id="readMore">read more ...</button>
    </div>
  </div>

The applesauceDropdown:hover is the problem

Rob Moll Rob Moll · Accepted Answer · 2021-09-01T19:24:24

Try the snippet. I put the hover on the <a> tag and that seems to give the desired result.

The reason the cursor wouldn't change is that you were actually hovering over the <a> tag when you hovered over the word "applesauce".

.applesauce button:hover+.applesauceDropdown {
  cursor: default;
  display: block;
}

.applesauce button:hover {
  color: #666666;
}

.applesauceDropdown a:hover {
  cursor: default;
  color: red;
}

<div class="applesauce">
  <button>Applesauce</button>
  <div class="applesauceDropdown">
    <a href="#">applesauce</a>
    <button id="readMore">read more ...</button>
  </div>
</div>

Can't change current cursor

1 Answers