Question

我有一个固定在浏览器底部的栏。我想让栏显示为“无”，这样当用户将鼠标悬停在栏上时，它会一直显示，直到它们悬停。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html {
background: #34495e;
}
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
</style>
</head>
<body>
<div id="pagebottom">
random text
</div>
</body>
</html>

Answer 1

试试这个css解决方案

#pagebottom {
    width: 92%;
    height: 20px;
    background: rgba(255, 255, 255, 0.80);
    margin-left: 4%;
    margin-right: 4%;
    bottom: 0;
    position: fixed;
    color: #3498db;
    text-align: center;
    opacity:0;        
}
#pagebottom:hover{
    opacity:1;
    transition:all .5s linear;
}

Answer 2

您可以使用：

1）css()设置div的不透明度：

2）hover()跟踪鼠标指针何时进入并离开div

3）animate()在更改不透明度时应用fadeIn()和fadeOut动画

$('#pagebottom').css('opacity','0');

$( "#pagebottom" ).hover(
  function() {
    $('#pagebottom').stop().animate({opacity: 1}, 500);
  }, function() {
    $('#pagebottom').stop().animate({opacity: 0}, 500);
  }
);

<强> Fiddle Demo

Answer 3

编辑这是一个jQuery解决方案。上面有一些很棒的CSS解决方案。

您无法将div显示为none，因为它没有宽度或高度，因此无法移动。但是，您可以使用opacity属性，并相应地修改页脚的CSS。

Take a look at this JSFiddle

以下是我所做的更改：

我在{pagebottom CSS中添加了opacity: 0;，因此默认情况下它是不可见的。

我添加了以下jQuery：

$('#pagebottom').mouseenter(function(){
    $('#pagebottom').css('opacity','1');
});

$('#pagebottom').mouseleave(function(){
    $('#pagebottom').css('opacity','0');
});

此代码等待，直到鼠标进入div区域，并将不透明度设置为1.当鼠标离开时，它会再次将不透明度设置为0，使元素不可见。

如果你想要一个好的传统，所以div淡入淡出，你可以使用CSS transitions或jQuery插件，如Transit，甚至是Felix在他的回答中描述的动画功能。

Answer 4

您可以使用CSS完成此操作。不需要JavaScript。：

#pagebottom {
    opacity: 0;
    width: 92%;
    height: 20px;
    background: rgba(255, 255, 255, 0.80);
    margin-left: 4%;
    margin-right: 4%;
    bottom: 0;
    position: fixed;
    color: #3498db;
    text-align: center;
}

#pagebottom:hover {
    opacity: 1;
}

动画固定底栏显示在悬停上

4 个答案: