Menu
I'm creating a special UI control using HTML/CSS to mimic the Windows 7 Control Panel buttons. So far, I've got the layout right and now I'd like to add some cosmetics to it.
As seen here, there is a gradient that appears when you hover over the button with your mouse.
http://m.cncfps.com/zack/files/this-control.png
Now, you can see here that I've got the layout done. I'd like to add a :hover effect to the whole div item with a background image.
Currently, here is what I have for the CSS- yet it doesn't work. No image shows up in IE8, or FireFox
EDIT: It works in Chrome, but not in FireFox or IE.
#cp .cp-item:hover
{
background:url(images/hoverbg.png) repeat-x;
}
It does however work with a background-color rather than an image.
947
The approach of this article is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover. Example: HTML.
In short, CSS overlay effects are achieved by using the following: background-image and background CSS properties to add image and linear-gradient overlay effect. position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
A hover effect is an animation that triggers when a user hovers over an element on the page. Some hover effects are as simple as enlarging an image. Others might change the color or make the image shrink or rotate.
It already works in Chrome.
Chrome seems to be more intelligent (or lenient) than other browsers. If I inspect the page, it's inserting stuff:
It doesn't work in other browsers because you don't have a proper page structure (no doctype, no <html> tag, no <body> tag, etc) - your page doesn't validate, and the other browsers do not "like it". I don't know the exact reason why it doesn't work with the other browsers - I imagine the reason is either an implementation detail, or buried within the W3 spec.
This works in "all browsers":
Live Demo
(I'm using the <base> tag to make the paths work)
It's your exact code, wrapped in typical boilerplate, with the addition of the <base> tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://toro.azwestern.edu/~zbl/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<link rel="stylesheet" href="style.css" type="text/css" />
<div id="cp">
<div class="cp-item"><span>
<div class="cp-item-icon"><img src="images/syssec.png" title="System and Security" /></div>
<div class="cp-item-content">
<h4>System and Security</h4>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
</span></div>
</div>
</body>
</html>
try to change the #cp .cp-item:hover to #cp div.cp-item:hover
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
