如何使用CSS和Javascript在鼠标悬停上上上下滑动

How to slide up and down on mouseover using CSS and Javascript?

本文关键字：悬停 上下 鼠标 何使用 CSS Javascript      更新时间：2023-09-26

http://www.sherpany.com/

这是我找到的一个网站。我想知道如何制作"投资者、董事会、公司"部分。

我想知道如何只在纯css中完成它，以及使用javascript的另一种方法？我如何才能做到这一点，同时添加按钮，并使其在向下滑动时消失。

谢谢。

您需要设置两个不同的类并添加一些css转换：

假设每个"块"都有块类，每个按钮都有按钮类别，然后执行以下操作：

 .block {
  height:40px;
  opacity:0.4;
  transition: height 1s;
}
.block:hover {
  height:100px;
}
.block > .button {
  opacity:0;
  transition: opacity 1s;
}
.block:hover > .button {
  opacity:1;
}

每个转换都以css属性为目标。

这里有一个小操场/例子给你：http://codepen.io/anon/pen/FLHmy

我会使用GSAP动画平台。你只需要在标题部分链接到它。

你可能想使用一个类似的tween，其中#菜单是你想弹出的选项卡。

TweenMax.to("#menu", .5, {height:____})

____是新高度应该是多少。

您还需要

#menu {
    position:absolute;
    bottom:0
}

在相对定位的分区内部。

对于纯CSS的实现方式，我会研究以下内容：

  • 悬停：https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
  • 不透明度：https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
  • 过渡：https://developer.mozilla.org/en-US/docs/Web/CSS/transition

然后制作一些div(或其他块元素(，当用户悬停在元素上时，更改其高度和不透明度。如果你在这些风格上设置了一个过渡，那么现代浏览器会显示出一个不错的小效果。

例如：

.move {
    background-color: #000;
    color: #fff;
    height: 100px;
    opacity: 0.3;
    position: absolute;
    top: 50px;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    width: 100px;
}
.move:hover {
    opacity: 0.7;
    top: 10px;;
}

Fiddle：http://jsfiddle.net/jkrehm/mn55L/

请记住渲染优化(尤其是在移动设备上(和旧浏览器的回退。我的例子可能无法在旧版本的IE上运行。

至于如何在JavaScript中做到这一点，我会研究.animate((函数。http://api.jquery.com/animate/

相关文章：