css - How to make a custom cursor appear on an entire page and not just one small portion -
i have seen this, not provide solution programming issues: custom cursor entire page
this css markup:
body { height: 100%; width: 100%; padding: 0; margin: 0; background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-size:12px; font-weight:bold; cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), auto; } div#mask { cursor: not-allowed; z-index: 999; height: 100%; width: 100%; } a:link { color: #ffffff; font-weight: normal; text-decoration: none; } a:visited { color: #ffffff; font-weight: bold; text-decoration: line-through; } a:active { color: #f433ff; font-weight: normal; text-decoration: blink; } a:hover { color: #f433ff; font-weight: bold; text-decoration: blink; } #about_me div.center { margin-left: auto; margin-right: auto; width: 8em; } { width: 355px; float: right; margin: 20px 0px 0px 0px; } .contenttitle { color: #fff; background: #000; } .contentmodule { color: #ff00ff; border: 1px solid transparent; background: transparent; cursor: pointer; } #right_column { float: left; width: 355px; margin: 20px 0 0 20px; } #left_column { width: 210px; margin-bottom: 10px; margin-right: 0px; float: left; } #pet_panel { position: absolute; top: 80px; right: 700px; margin-top: 50px; width: 40%; float: left; margin: 0 0 20px 0; } #comment_panel { position: absolute; top: 700px; right: 85px; margin-top: 50px; } #tombstone_panel { position: absolute; top: 30px; right: 85px; margin-top: 50px; } #user_panel { position: absolute; top: 30px; right: 385px; margin-top: 50px; } #wishlist_panel { position: absolute; top: 250px; right: 85px; margin-top: 50px; } this html markup:
<div id="about_me" class="contentmodule"> <div class="contenttitle">about me</div> <div class="contentmodulei">my tagline </div> </div> what can make custom cursor visible throughout page default cursor is?
if need display custom cursor on full page have add css this. have @ demo.
body, html { height: 100%; width: 100%; padding: 0; margin: 0; background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center; cursor:url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help; } so here explain how works; firefox , chrome fine .jpg or .png file extension. support in ie need .cur file extension. may convert image .cur extension. online tool.
note: if need work in ie have use cursor .cur file extension.
Comments
Post a Comment