鼠标滑过“淡入淡出”菜单栏的最佳方法

Question

首先，我对一篇冗长的文章表示歉意。我正在尝试使用CSS，HTML和JavaScript，所以请不要推荐使用std。库。

1）我发现使用CSS，HTML和JavaScript的不同方法的人实现了“淡入/淡出效果”的导航条，一些使用CSS和JavaScript的方法是：

一）使用属性“左”来获取屏幕外的子菜单。默认值left：-500px; onmouseover-左：-10px

b）使用属性“visibility”。默认可见度：“隐藏”和onmouseover- 能见度：visbile

c）使用属性“display”。默认显示：无和onmouseover-显示：块

我的问题是哪一个是最好的方法，为什么？

2）我在这个jsfiddle中使用了方法a）：http://jsfiddle.net/A7TND/。

CSS

.teal-box{ 
left:-10px; 
} 

HTML

<div class="level1" onmouseover="showSubs(&quot;+&quot;)"> 

的Javascript

switch (vwFlg){  
case "+" : 
elmt.style.left = "-10px"; 
... 
} 

在这个例子中，我不知道当我在主项目（最喜欢的）和子项目（jsfiddle，google）之间移动时，函数是否会被反复调用，我的问题如下： a）它在主项目之间的鼠标移动过程中被反复调用）和子项（谷歌和jsfiddle）？ b）那（反复调用JavaScript函数）如何影响页面的响应？

3.我的做法是将多张图片（请参阅jsfiddle链接）用

---

分隔开来，它有多个div--顶端有不同的值，是最好的方法吗？这意味着，我将不得不为每个图像编写一个div，是否存在一种使用绝对和相对的“位置”属性以实现该效果的方法，而不会创建与图像一样多的div？

1. 我想要一个表，我该如何得到“按钮跳出页面”的外观？我试图调试一个商业的网络应用程序，似乎他们似乎重复了我试过的背景图像，但那并不奏效。

CSS

.sel-row { 
border-style:solid; 
border-width:1px; 
background-image:url("\lb_sel.gif"); 
background-repeat:repeat-x-y; 
background-color:#CDD2D7 ; 
border-color:#8B96A2 ; 
height:20px; 
} 

Answer 1

我这样的事情的办法，是让隐藏的元素是悬停的子元素，然后使用绝对定位+显示器的隐藏/显示

<li> 
    Button Copy 
    <span>HIDE SHOW ME</span> 
</li> 

li { 
    position:relative; 
} 
li:hover span { 
    display:block; 
} 
li span { 
    position:absolute; 
    top:25px; 
    left:0; 
    display:none; 
} 

你是否也在为不透明度设置动画？

使用javascript向元素添加类，使用CSS3动画，但了解不使用CSS3的浏览器。另外，不要再使用显示器。

<li> 
     Button Copy 
     <span>HIDE SHOW ME</span> 
    </li> 

    li { 
     position:relative; 
    } 
    li.show span { 
     opacity:0; 
    } 
    li span { 
     position:absolute; 
     top:25px; 
     left:0; 
     opacity:1; 
     -webkit-transition: all .8s ease-in; 
     -moz-transition: all .8s ease-in; 
     -o-transition: all .8s ease-in; 
     -ms-transition: all .8s ease-in; 
     transition: all .8s ease-in; 
    } 

对于不支持css3的浏览器，我使用Modernizr + jQuery作为回退。你必须把它变成切换。

if (!Modernizr.csstransitions) { // if browser doesn't support css3.transitions 
    $('li span').animate({ "opacity": '1' }, 800); 
} else { // if browser does support css3.transitions 
    $('li').addClass('show'); 
}