列表项（li）在IE中悬停效果 [英] list item (li) hover effect in IE
问题描述
嗨民俗
对于希望菜单看起来更好的新手来说，这里有点帮助。
我相信很多你做这样的菜单
< ul id =" menu">
< li>< a href =" page1。 HTML">选项1·; / A>< /立GT;
将立GT;< A HREF = QUOT; page2.html">选项2'; / A>< /立GT ;
< li>< a href =" page3.html">选项3< / a>< / li>
< li>< ; a href =" page4.html">选项4< / a>< / li>
< / ul>
然后添加这样的风格
#menu li：悬停{background-color：＃123456;}
下面是一个小功能我发达" （偷，复制和改编）
可以在IE中创建这种悬停效果。
要使其正常工作，请按如下方式编写body标签：
< body onload =" hoverer（''menu''）;">
function hoverer（ulname）{
if（document.all&& document.getElementById（ulname）.currentStyle）{
var navroot = document.getElementById（ulname）;
var lis = navroot.getElementsByTagName（" li"）;
for（i = 0; i< lis.length; i ++）{
var oldClassName = this.className;
lis [i] .onmouseover = function（）{this.className = ulname +" ie" ;;}
lis [i] .onmouseout = function（）{this。 className = oldClassName;}
}
}
}
任何评论/问题非常感谢。
- Nicolaas
没有羽毛笔和羽毛，windandwaves引用：
< blockquote class =post_quotes>嗨民俗
对于希望菜单看起来更好的新手来说，这里有点帮助。
我相信很多人都会制作这样的菜单
< ul id =" menu">
< li>< a href =" page1.html"> option 1< / a>< / li>
< li>< a href =" page2.html">选项2< / a>< / li>
< li>< a href =" page3.html">选项3< / a>< / li>
< li>< a href =" page4.html">选项4< / a>< / li>
< / ul>然后再加上这样的风格
＃menu li：hover {background-color：＃123456;}
下面是一个小功能我开发了（偷，复制和改编）
可以在IE中创建这种悬停效果。
要使其工作，请按如下方式编写body标签：
< body onload =" ; hoverer（''menu''）;">
函数hoverer（ulname）{
if（document.all&& document.getElementById（ulname）.currentStyle） {
变种navroot =的document.getElementById（ulname）;
变种LIS = navroot.getElementsByTagName（QUOT;李"）;
为（I = 0; I< lis.length;我++） {
var oldClassName = this.className;
lis [i] .onmouseover = function（）{this.className = ulname +" ie" ;;}
lis [i] .onmouseout = function（）{this.className = oldClassName;}
}
}
非常感谢任何意见/问题。
- Nicolaas
这很棒但是如果你需要javascript，为什么不只是使用onmouseover？
-
Neredbojias
与流行的看法相反，这是可信的。
Neredbojias写道：既没有羽毛也没有怀疑，windandwaves引用：
Hi Folk
对于希望菜单看起来更好的新手来说，这里只是一些帮助。
我相信很多人都会制作这样的菜单
< ul id =" menu">
< li>< a href =" page1.html"> option 1< / a>< / li>
<立GT;< A HREF = QUOT; page2.html">选项2'; / A>< /立GT;
<李>< A HREF = QUOT; page3.html">选项3'; / a>< / li>
< li>< a href =" page4.html">选项4< / a>< / li>
< / ul>
然后添加这样的风格
#menu li：hover {background-color：＃123456;}
下面是一个小功能I" ;显影" （偷，复制和改编）
可以在IE中创建这种悬停效果。
为了使其工作，请按如下方式编写body标签：
< body onload =" ; hoverer（''menu''）;">
函数hoverer（ulname）{
if（document.all&& document.getElementById（ulname）.currentStyle） {
变种navroot =的document.getElementById（ulname）;
变种LIS = navroot.getElementsByTagName（QUOT;李"）;
为（I = 0; I< lis.length;我++） {
var oldClassName = this.className;
lis [i] .onmouseover = function（）{this.className = ulname +" ie" ;;}
lis [i] .onmouseout = function（）{this.className = oldClassName;}
}
}
非常感谢任何意见/问题。
- Nicolaas
这很棒但是如果你需要javascript，为什么不只是使用onmouseover？
我使用的原因javascript是因为如果你有一个很长的菜单，
它保持html干净（没有任何鼠标悬停）。
话虽如此，我现在正在使用dorayme的解决方案，因为它似乎很多
再次更聪明！
谢谢
- Nicolaas
Neredbojias在2005年10月21日晚上11:17发表以下文章：没有羽毛笔和羽毛球，windandwaves引用：
< ; snip>
lis [i] .onmouseover = function（）{this.className = ulname +" ie" ;;}
lis [i] .onmouseout = function（）{this.className = oldClassName;}
}
}
}
非常感谢任何意见/问题。 />
- Nicolaas
这很棒，但是如果你需要javascript，为什么不使用onmouseover？
它确实使用onmouseover / out，它只是动态地添加它们。
-
兰迪
comp.lang.javascript常见问题 - http://jibbering.com/常见问题&新闻组周刊
Hi Folk
Just a bit of help here for newbies who want their menus to look nicer.
I am sure that many of you make menus like this
<ul id="menu">
<li><a href="page1.html">option 1</a></li>
<li><a href="page2.html">option 2</a></li>
<li><a href="page3.html">option 3</a></li>
<li><a href="page4.html">option 4</a></li>
</ul>
and then add style like this
#menu li:hover {background-color: #123456;}
Below is a little function I "developed" (stole, copied and adapted) that
can create this hover effect in IE.
To make it work, write the body tag as follows:
<body onload="hoverer(''menu'');">
function hoverer(ulname) {
if (document.all && document.getElementById(ulname).currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (i=0; i<lis.length; i++) {
var oldClassName = this.className;
lis[i].onmouseover=function() {this.className = ulname + "ie";}
lis[i].onmouseout=function() {this.className = oldClassName;}
}
}
}
any comments / questions greatly appreciated.
- Nicolaas
With neither quill nor qualm, windandwaves quothed:
Hi Folk
Just a bit of help here for newbies who want their menus to look nicer.
I am sure that many of you make menus like this
<ul id="menu">
<li><a href="page1.html">option 1</a></li>
<li><a href="page2.html">option 2</a></li>
<li><a href="page3.html">option 3</a></li>
<li><a href="page4.html">option 4</a></li>
</ul>
and then add style like this
#menu li:hover {background-color: #123456;}
Below is a little function I "developed" (stole, copied and adapted) that
can create this hover effect in IE.
To make it work, write the body tag as follows:
<body onload="hoverer(''menu'');">
function hoverer(ulname) {
if (document.all && document.getElementById(ulname).currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (i=0; i<lis.length; i++) {
var oldClassName = this.className;
lis[i].onmouseover=function() {this.className = ulname + "ie";}
lis[i].onmouseout=function() {this.className = oldClassName;}
}
}
}
any comments / questions greatly appreciated.
- Nicolaas
That''s great but if you need javascript, why not just use onmouseover?
--
Neredbojias
Contrary to popular belief, it is believable.
Neredbojias wrote:With neither quill nor qualm, windandwaves quothed:Hi Folk
Just a bit of help here for newbies who want their menus to look
nicer.
I am sure that many of you make menus like this
<ul id="menu">
<li><a href="page1.html">option 1</a></li>
<li><a href="page2.html">option 2</a></li>
<li><a href="page3.html">option 3</a></li>
<li><a href="page4.html">option 4</a></li>
</ul>
and then add style like this
#menu li:hover {background-color: #123456;}
Below is a little function I "developed" (stole, copied and adapted)
that can create this hover effect in IE.
To make it work, write the body tag as follows:
<body onload="hoverer(''menu'');">
function hoverer(ulname) {
if (document.all && document.getElementById(ulname).currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (i=0; i<lis.length; i++) {
var oldClassName = this.className;
lis[i].onmouseover=function() {this.className = ulname + "ie";}
lis[i].onmouseout=function() {this.className = oldClassName;}
}
}
}
any comments / questions greatly appreciated.
- Nicolaas
That''s great but if you need javascript, why not just use onmouseover?
The reason I used the javascript is because if you have a really long menu,
it keeps the html clean (without any mouseovers).
Having said that, I am now using dorayme''s solution, because it seems a lot
smarter again!
Thank you
- Nicolaas
Neredbojias said the following on 10/21/2005 11:17 PM:With neither quill nor qualm, windandwaves quothed:
<snip>
lis[i].onmouseover=function() {this.className = ulname + "ie";}
lis[i].onmouseout=function() {this.className = oldClassName;}
}
}
}
any comments / questions greatly appreciated.
- Nicolaas
That''s great but if you need javascript, why not just use onmouseover?
It does use onmouseover/out, it just adds them dynamically.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
这篇关于列表项（li）在IE中悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
