0

首先，我为一个冗长的帖子道歉。我正在尝试使用 CSS、HTML 和 JavaScript，所以请不要推荐使用 std。图书馆。

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

a) 使用属性“left”来获取屏幕外的子菜单。默认左侧：-500px；鼠标悬停在左侧：-10px

b) 使用属性“可见性”。默认可见性：“隐藏”和 onmouseover-可见性：可见

c）使用属性“显示”。默认 display:none 和 onmouseover- display:block

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

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？

  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;
}
4

1 回答 1

0

我的方法是让隐藏元素成为悬停元素的子元素，然后使用绝对定位+显示来隐藏/显示

<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');
}
于 2013-03-20T17:39:43.327 回答