How can I achieve a cursor hover affect when hovering over an inner element? (CSS)

Question

I am trying to achieve a help cursor when hovering over a button, but the issue is I can't set the hover effect on the button itself (I only want to affect certain buttons and its not possible to set a unique class name on this specific button). I've instead opted to render the button inside another div which I am hoping to set the cursor hover effect on. However it only works on the very outer edge of the button. Any insight in how I can make this work with my div setup is hugely appreciated

Codepen: https://codepen.io/sgoldberg/pen/vGzGYL

.container {
  width: 400px;
  border: solid 1px black;
  height: 400px;
  cursor: help;

.button {
  width: 100%;
  height: 100%;
}

<div class="container">
  <button class="button"> Hover Button </button>
</div>

Answer 1

.container>.button {
  cursor: help
}

<div class="container">
  <button class="button">My Button</button>
</div>

<button class="button">Without container</button>

Answer 2

I give you two solutions, use witch one you want.

First solution, find the element inside its parent then give it the cursor:

.container .button {
  cursor: help;
}

<div class="container">
  <button class="button">My Button</button>
</div>

<button class="button">Without container</button>

Second solution, find the element inside its parent then give it a custom cursor:

.container .button{
    cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFiUlEQVR4nG2Va3CUhRWGTzb/nP7pDJVKQGIum2wuQAjJJptkE1AIgUBUCrUQJEGJaQ1SzdgWGklhRASGclUYsSm0xQElWKVNqZAMNwET3Iagppg7yV6zt283m2Xzffu+TtQZx9H3/3nmnDNzniPybYYBUQFhFNINxAohQ4TcJOQ/hJwm5Dgg5wh5oBcx293QLb9P+dH0AeIExQ/IPwHdCCAVk0AgowOovgA0nAW2nAKeagESpt+jHFAgy3oRC1tU3rVDtvXhG9jngFhBcYMxBKWdkBGgrAO4fB6IngJ4TAP/HAG3j4Nbgghv9uP9I35kr+qnyMfhGIuHctr6bbckZIwQkrKekLvAvgsAj2vgvgjwWgjaVgXqyx6odS5oVXZw5Qi4cgjcOIiNsy2qyNXxmMl6+YtrEkg5OAHdeUK6iIPvaeDOMLQGhWq9B6h2EqtsRMUwsXwAeLIviqV3oxNFn2ss7tRYfVutLW2PSMGNSKzuHbfIBQ2xnxBiIR5vioD1Pmq/cQJVNnC1FWh0RNHkUnnUFsGGARU5dyZg6rzPvFthLePaOE2Xx9X6W+H0X7eHZfXNcZ2Q6uTg8kYI7TUu8Jf3oD7RH2XxXQ31gxHQ56c6YqfmHKXLNsr1nQoSr48h/WqQKa2BCX2LQvN/A3+fedYv05r9OjnkhxzxI7faBi7qjWLB/1WYP4tgTmcYVRYvdxz/mHm/PcHNTR/R7R7lsY4RTvm3BwltCma0+KIzmj00nPa4lp71TC074xFZ0R+VXw1EN5Xc1Wjsimjz/hdG1q0QZt0KMaXNzZ/ttlDqL/KpNy8zGPBw2/le/uTECB9u8WH6GS8e/ptbSzoySsMB5wLDfqdIjiUsRsv4ntmfjjOjI6SmfTKG1BtjTL4eZNL1AKe+a2P5yR4OO9y81DlAw547nHrUyviTHjxywouENz1q0i4X9VvtlYlbHSKpbT5Ja/XuSb6iMOlaUE24FkT81SBnXgnw55cC1J9zcsju4c3OAaY0dPDBnQNMOGBn4mE39Id90O/2qKkNLma+ZF2T+qJdJLHZJinN1o0zWtyMa1W0uDYF09oCmH4xwAdbAjQ2O9jdPcSaI3f40y19TNnrZPIuF1Nf9yDtNR/SXvFGMze5aKwdLsl5blhE/1aPGI71ZD/0jpVTP/Ri2r/8mHEugPgPAkh8f4wJTW5W7rawdOtnjG90Mm2Hh+nbvMh8xYfZm/3RWZt8nFvtcJSv+3LK0rVffn0qIkcpM/f3XY9728n4kz418aTClH8EEd8URMVpP3E/xO5BhfP+5GZGg4KsPyiY+5LC7DplIvtpL/NXWv+a+YRLMla6daJv/CJW/8cuSd9yu+yR7QNM2O/WUg75o+kHAzTsDcC0cxRnLtpx+D0H5rzgxrwXgzDWBZlXE9SMawLMX+4MLyrv0T+2pEfmLxvSye+S3pIpm+26uE19kvZ8167k+iEaGr3RzG2KmtUYwKzf+2GocSJtnQs5GxSYnh2LFq4LTRT8YowFi92cv3CwyrRgRPIWOmINy0ZFFq9rlaLKS1+L4oH6+5JZ2flqWvUgZ9W6mV0XYF7dmFpQG1KLngmp5spxrXhFiOayIM0lo+qj5qFn8oockjE/qGtdcEhmLveLZL1skZwNNyTv6Ssxk/tMXNsn2eUd8+dU9HyU/bg1nFsxStMyHwvL/DQ/5mOx2eMrMdlPleb3pBfl2ySjOKSrWnJDVpV1fSfYuevbJXf1VSlYe0Hia2y6rLJPJW6NJqYiiz7f3LOisGjwBbPp3vMlxqHy0pwvphtzg7Iwt1dMRc7YvXVvy4pFt2Xxov4fmnvt6n2yY+cSmf3kHd1DtYwxFVgkt7Bfck12yTc6xDxvWEqzuyW3MKR7tOCeLtMQkPjk77+BrwCii7nZbT2n6gAAAABJRU5ErkJggg=="),auto;
}

<div class="container">
  <button class="button">My Button</button>
</div>

<button class="button">Without container</button>

I hope this solves your problem!

Answer 3

If you want just one specific element to have a certain styling, try using an id tag. https://www.w3schools.com/cssref/sel_id.php

<div id="<your_desired_name>">

& css:

#<your_desired_name>:hover {
  cursor: help
}