Question

首先，我为一篇冗长的帖子道歉。我正在尝试使用CSS，HTML和JavaScript，所以请不要建议使用std。库。

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

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

b）使用属性“可见性”。默认可见性：“隐藏”和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--其中top有不同的值，这是最好的方法吗？这意味着，我将不得不为每个图像写一个div，是否有一些使用“位置”属性绝对和相对来实现的方式，而不创建与图像一样多的div？

我想要一个表，如何让“按钮弹出页面”看起来？我试图调试一个商业网络应用程序，似乎他们似乎重复了我尝试过的背景图片，但这不起作用。

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');
}

鼠标悬停时“淡入/淡出”菜单栏的最佳方法

1 个答案: