Movable Type Community Forum > CSS mouseover effectt

Movable Type Community Forum > Additional Resources > Tips and Tricks

nolageek

Apr 2 2003, 09:30 AM

I'm trying to get css mouseovers to work. I'm using this in my stylesheet:

CODE

div#side {
position:absolute;
top:155px;
left:465px;
width:150px;
background:#ffffff;
border-left:1px solid #999999;
font:10px verdana, arial, helvetica, sans-serif;
font-weight:normal;
color:#666666;
padding:2px;
margin-bottom:20px;
}
div#side a img {height: 0; width: 0; border-width: 0;}
div#side a:hover img {height: 150px; width: 150px;}

It's not working. Here's the code for my menu:

CODE

<div id="side">

<div class="sideheader">nlt blogs</div>
- <a href="/gina">gina<img src="<$MTBlogURL$>images/mugs/gina/gina1.jpg" /></a> <br />
- <a href="/marshall">marshall<img src="<$MTBlogURL$>images/mugs/msh/msh1.jpg" /></a> <br />
- <a href="/vincent">vincent<img src="<$MTBlogURL$>images/mugs/vince/vince1.jpg" /></a> <br />
- <a href="/dan">dan<img src="<$MTBlogURL$>images/mugs/dan/dan1.jpg" /></a> <br />
- <a class="side" href="/cgi-bin/MT-2.5/mt.cgi">admin</a><br />
- <a href="/mail"><img src="/mt/images/ico_mail.gif" border ="0" alt="Access NLT e-mail" /></a>
<br />

<div class="sideheader">thanks be to</div>
- <a class="side" href="http://www.mizjenna.com/~mizgraphics/">miz graphics!</a><br />
- <a class="side" href="http://www.movabletype.org/">movable type</a>
</div>

Anyone see anything I did wrong? I got this from a link on scriptygoddess.com

adamrice

Apr 2 2003, 12:33 PM

I'd like to see the test page, but it seems like a problem that you've defined the image in the first place as having height and width of 0. Does it appear at all?

nolageek

Apr 2 2003, 03:56 PM

noleftturns.com

Well, the image is defined as 0x0, but when it's hovered over, it is displayed 150x150 - giving it a mouseover effect.

VInceny

mcroft

Apr 2 2003, 04:36 PM

Have you seen the Eric Meyer Article on Pure CSS Menus on css/edge? It will explain all there is to know about :hover. Only thing he misses is that they work in Safari v60 on Mac OS X.

adamrice

Apr 2 2003, 04:54 PM

Well, it's working here (OS X, Chimera).

A simpler way to achieve this effect is to set the image to display: block or display: none.

But I also think this approach needs a lot of work. It's impossible to zip down a row of names when an image is popping up between the name you're on and the next one, and that just feels wrong--it's kind of jarring. As mcroft mentions, Eric Meyer is the uber-ninja-guru of these tricks; he'd probably suggest that you use absolute positioning on that image to move it somewhere else out of the way.

leefly

Apr 3 2003, 07:46 PM

There are tools to build mouseover effects here:

Mouseover Machine

I hope this helps.

Lee

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.