Search code examples
htmlcsscursor

Cannot Use Custom Cursor


I am trying to use a custom cursor with a url code, but it seems that it will not work. Here is the link to the cursor I am trying to use: http://www.rw-designer.com/cursor-detail/43903

Snippet:

.dropbtn {
  background-color: rgba(0, 0, 0, 0.0);
  font-family: 'Montserrat', sans-serif;
  color: white;
  padding: 5px;
  font-size: 14px;
  border: none;
  cursor: url(http://www.rw-designer.com/cursor-extern.php?id=43903), auto;
}
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">&#8883;Featured&#8882;</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="walnutwetbar.html">Walnut Wetbar</a>
    <a href="woodandsteel.html">Wood and Steel</a>
    <a href="bluestainpine.html">Blue Stain Pine Changing Table</a>
    <a href="dualityguitar.html">Duality Guitar</a>
  </div>
</div>


Solution

  • Super close, just add the word 'auto' at the end of cursor. IE: cursor: url(http://www.rw-designer.com/cursor-extern.php?id=43903),auto;

    https://jsfiddle.net/ttngcLgf/

    .dropbtn {
      background-color: black;
      font-family: 'Montserrat', sans-serif;
      color: white;
      padding: 5px;
      font-size: 14px;
      border: none;
      cursor: url(http://www.rw-designer.com/cursor-extern.php?id=43903),auto;
    }
    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn">&#8883;Featured&#8882;</button>
      <div id="myDropdown" class="dropdown-content">
        <a href="walnutwetbar.html">Walnut Wetbar</a>
        <a href="woodandsteel.html">Wood and Steel</a>
        <a href="bluestainpine.html">Blue Stain Pine Changing Table</a>
        <a href="dualityguitar.html">Duality Guitar</a>
      </div>
    </div>