1

I have a simple code

<h1>Hello</h1>

When I open this .html file inside Firefox browser, when I hover cursor over Hello, cursor changes from arrow to a vertical bar. Why is this so ? Is this because Firefox's default style sheet ?

j08691
  • 204,283
  • 31
  • 260
  • 272
user9026
  • 852
  • 2
  • 9
  • 20
  • 1
    will it help you? - https://stackoverflow.com/questions/3087975/how-to-change-the-cursor-into-a-hand-when-a-user-hovers-over-a-list-item – s.kuznetsov Jul 24 '21 at 14:53

1 Answers1

1

By default all text tags "vertical bar", this means that you can select text and copy it. If you want change cursor on hover effect, use css with option cursor. cursors documentation and about custom cursors

html {
  background: hsl(0, 2%, 11%);
  background-image: url(https://www.iconsdb.com/icons/preview/guacamole-green/cursor-3-xxl.png);
}
h1 {
margin-top: 50px;
  display: inline;
  padding: 10px;
  color: grey;
}
#auto {
  cursor: auto;
}
#pointer {
  cursor: pointer;
}
#default {
  cursor: default;
}
#you-own-cursor {
  cursor: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 2.32471L16.5 18.1737' stroke='%23F986A1' stroke-width='3' stroke-linecap='round' stroke-linejoin='bevel'/%3E%3Cpath d='M16.5 2.32471L1.50005 18.1737' stroke='%23F986A1' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 5 5, pointer;
}
<h1 id="auto">Hello</h1>
<h1 id="pointer">Hello</h1>
<h1 id="default">Hello</h1>
<h1 id="you-own-cursor">Hello</h1>
Anton
  • 8,058
  • 1
  • 9
  • 27