Html CSS-转换为'；溢出'；？

我得到了一个

页脚

，有一些可滚动的内容，带有

overflow-y

。 页面上的所有其他内容都使用CSS转换非常平滑地设置动画，但是当鼠标悬停时，滚动条显示在页脚中，当它没有任何转换时，看起来非常愚蠢。看看。 有没有办法让它平稳过渡

CSS:

footer
{
    background-color:#333333;
    position:fixed;
    height:4%;
    bottom: 0px;
    margin-bottom: 0px;
    width:100%;
    text-align: right;
    transition: all ease 1.1s;
    color: white;
    background-image:url('world1.gif');
    background-repeat:no-repeat;
    background-position: right bottom ;
    background-size: contain;
    overflow-y: hidden;
}

footer:hover {
height: 400px;
opacity: 0.95;
overflow-y: auto;
}

---

您可以这样做，并放置一个div来隐藏滚动条。它很粗糙，但是滚动条并不是真的应该是动画的

---

或者，您可以搜索自定义滚动条插件，如iScroll等。

您可以执行类似操作，并放置一个div来隐藏滚动条。它很粗糙，但是滚动条并不是真的应该是动画的

---

作为替代，您可以搜索自定义滚动条插件，如iScroll等。

这应该是什么样子？？？你可以用一个div覆盖一个始终存在的滚动条（overflow-y:scroll），你可以淡出和淡出。它看起来应该是这样的，但是滚动条在悬停时应该淡出。然后你必须像一个说的那样做。我很困惑。。。请举个例子？那应该是什么样子？？？你可以用一个div覆盖一个始终存在的滚动条（overflow-y:scroll），你可以淡出和淡出。它看起来应该是这样的，但是滚动条在悬停时应该淡出。然后你必须像一个说的那样做。我很困惑。。。请举个例子好吗？

footer, 
.cover-scroll{
    position:fixed;
    bottom: 0px;
    transition: all ease 1.1s;
    height:4%;
}

footer    {
    width:99%;
    overflow-y: auto;
}

footer:hover {
  opacity: 0.95;
  height: 400px;
}

.cover-scroll{ 
    background: #fff;
    width: 40px;
    right: 0px;
    outline: 1px solid red;
    bottom: 0;
    z-index: 20;
}

.cover-scroll:hover, 
footer:hover .cover-scroll{
    opacity: 0;
    visibility: hidden;
    height: 400px;
 }