Css – Custom Cursor Image CSS

cssfirefoxmouse-cursor

I have a number of heroshot images, that have a modal popup when clicked.
I'm trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.cur is present in the right location.

a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}

Has anyone ever done anything similar? I don't mind a JavaScript solution if one exists.

EDIT: It works in Safari, but not in Firefox.

Best Answer

Your problem may be that cursor URLs don't work in Firefox for the Mac.

You can get the same effect on Firefox by using the -moz-zoom-in keyword.

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.

You can also see a list of cursor keywords supported by different browsers.

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Html – How to give text or an image a transparent background using CSS

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5);

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

Best Answer

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Html – How to give text or an image a transparent background using CSS

Related Topic