CSS翻转菜单 [英] CSS rollover menu
问题描述
你好，
我一直潜伏在这里一点点（事实上，我潜藏太多
新闻组才真正有效） 。我已经制作了一个CSS翻转菜单，并且
想要一些建议。菜单位于URL
http://www.digitalovertone.com/ index3.php 。您会注意到，每次将鼠标悬停在它上面时，每个
链接都会消失（根据我的经验，这在
Opera中最为明显）。每个链接包含2个图像（1个用于a：悬停，1个
用于a：其他所有内容），每个图像介于500B和2.0KB之间。一旦
图像被缓存，这个问题（显然）就会消失。
有没有办法防止链接在第一次消失时消失/>
浏览器加载：悬停图片？最简单的解决方案当然是简单地改变背景颜色而不是背景图像，但是
这会破坏菜单重叠下边缘的效果
图片。如果可能的话，我想避免使用Javascript。
我认识到这种效果产生了一些相当混乱的CSS。
这并不关心我在这一点上。我仍处于设计阶段，
并试图掌握我的局限性。如果在没有链接消失的情况下无法创建
这个效果，我会寻求一个设计解决方案。
非常感谢，
Kyle
Hello,
I have been lurking here for a little bit (truth be told, I lurk on too many
newsgroups to be truly effective). I have made a CSS rollover menu, and
would like some advice. The menu is at the URL
http://www.digitalovertone.com/index3.php. You will notice that the each
link disappears the first time you hover over it (this is most noticable in
Opera, in my experience). Each link consists of 2 images (1 for a:hover, 1
for a:everything else), and each image is between 500B and 2.0KB. Once the
images have been cached, this problem (obviously) disappears.
Is there any way to prevent the links from disappearing the first time while
the browser loads the :hover image? The easiest solution would of course be
to simply change the background color rather than the background image, but
this would ruin the effect of having the menu overlap the lower edge of the
picture. I would like to avoid Javascript, if possible.
I recognize the producing this effect has made for some fairly messy CSS.
That doesn''t concern me at this point. I still kind of in the design phase,
and trying to get a grasp on my limitations. If there''s no way to create
this effect without the link disappearing, I will seek a design solution.
Many thanks,
Kyle
推荐答案
在帖子中：< news：4hzsc.2007
in post: <news:4hzsc.2007
eT4.211@attbi_s54>
Kyle James Matthews< kj ********* @ comcast.net>说：
eT4.211@attbi_s54>
Kyle James Matthews <kj*********@comcast.net> said:
有什么办法可以防止链接第一次消失，而浏览器加载：悬停图片？
Is there any way to prevent the links from disappearing the first time while
the browser loads the :hover image?
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers /
-
brucie
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
--
b r u c i e
>当你第一次将鼠标悬停在它上面时，链接就会消失（这是最值得注意的
在
> link disappears the first time you hover over it (this is most noticable
in
中的
>根据我的经验，Opera）。每个链接包含2个图像（1个用于a：悬停，
1用于：其他所有内容），每个图像介于500B和2.0KB之间。一旦
图像被缓存，这个问题（显然）就会消失。
Opera, in my experience). Each link consists of 2 images (1 for a:hover, 1 for a:everything else), and each image is between 500B and 2.0KB. Once the images have been cached, this problem (obviously) disappears.
这个想法可能对你有所帮助：
url： http://builder.com.com/5100- 6371-5148960.html
或者，您可以在菜单获得之前预先加载HTML图像
下载：
< div style =" visibility：hidden">
< img src =" but1.gif"宽度= QUOT; 0"高度= QUOT; 0" alt ="">< img src =" but2.gif"
width =" 0"高度= QUOT; 0" alt ="">< img src =" but3.gif width =" 0"高度= QUOT; 0" alt ="">
< / div>
< div id =" menu">
< ul>
< li>< a href =" ...">关于我们< / a>< / li>
< li>< a href =" ...">服务< / a>< / li>
< / ul>
希望以某种方式帮助，
尼克。
This idea might help you:
url:http://builder.com.com/5100-6371-5148960.html
alternatively, you could pre-load the images in HTML before the menu gets
downloaded:
<div style="visibility:hidden">
<img src="but1.gif" width="0" height="0" alt=""><img src="but2.gif"
width="0" height="0" alt=""><img src="but3.gif width="0" height="0" alt="">
</div>
<div id="menu">
<ul>
<li><a href="...">About Us</a></li>
<li><a href="...">Services</a></li>
</ul>
Hope that helped somehow,
Nick.
这篇关于CSS翻转菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
