How to Make an Icon With Hover Effect Using Only CSS

I worked out a technique to give button images a hover or mouseover effect using only CSS. It’s probably been done before, but I think it’s useful enough to merit documentation.

For this example, let’s use the dashboard icon standard and hover images from my previous post. You’ll also need a 16×16 transparent image, blank.png (transparent png). The need for this blank image will become evident in a moment.

Here’s the HTML:

<a href="..." class="dashboardLink">
<img src="blank.png">
</a>

Note that we’ve used the transparent blank.png to fill the image tag. On some browsers, if there’s no content, the box element for the tag will not be rendered. Also, most browsers will render the content of the alt attribute as a tooltip on mouseover, so that’s a nice side effect of using an img to fill the space.

Now, here’s the CSS:

a.dashboardLink {
background: url(dashboard.png) no-repeat top center;
width: 16px;
height: 16px;
display: inline-block;
vertical-align: text-bottom;
}

a.dashboardLink:hover {
background: url(dashboard-hover.png) no-repeat top center;
}

a.dashboardLink img {
border: 0 none;
width: 16px;
height: 16px;
}

We’re displaying the dashboard.png image as the background of the content of the link tag. The a.dashboardLink:hover class supplies the alternate dashboard-hover.png image on mouseover. Setting a fixed height and width ensures that the element will be rendered in its full size, not clipped to height of other elements in the same box. display: inline-block is also necessary to ensure that the element height won’t be clipped in Firefox. vertical-align: text-bottom forces the image to align with any text in the same block (e.g., a menu bar), also in Firefox.

Regrettably, WordPress.com won’t permit me to put a style tag in this post, so I can’t show you the final effect.

Now, if only I can find a way to declare a pseudo-class inline, instead of in a style tag in the header – I’d like to subclass the Grails GSP link tag to generate hover buttons from just an image name and a URL. Has anyone had any luck finding a way to do that?

Advertisements

#css, #hover, #mouseover-effect

Negative Numbers, Internet Explorer and Line Breaks

An end user submitted a bug report to me for a web application I work on. I’m glad that I didn’t simply dismiss it out of hand as a browser problem that I couldn’t solve, because I learned something.

A tester viewing a report we’re presenting in HTML commented that for sufficiently long negative numbers, Internet Explorer is inserting a line break between the minus sign and the number.

-131,344.11

It didn’t seem to make any sense until I realized that a minus is the same character as a hyphen, and that most text handlers have special rules for hyphens. And then I discovered this incredibly thorough discussion of word division in Internet Explorer.

Here is a fixed example, using the suggestion to replace the standard minus character with a non-breaking hyphen entity. For the web application, we implemented the fix in CSS, using the white-space:nowrap property.

‑131,344.11

#css, #ie-hacks, #internet-explorer