CODEWITHSUNDEEP
html
user9026
user9026

Reputation: 970

Arrow cursor changes to vertical bar while hovering over h1

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 ?

Upvotes: 1

Views: 333

Answers (1)

Anton
Anton

Reputation: 8538

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>

Upvotes: 1

Related Questions