Question

我正在构建一个网站，我正在尝试为:hover div设置动画，以便当鼠标悬停在其上时，另一个当前位于opacity:0的div会将其不透明度增加到{{1}超过3.5秒的范围，同时淡出到位。

这将正常工作，直到我第二次尝试它，然后当我用鼠标离开对象时它不会淡出回0.8不透明度。该对象将以不透明度0保持可见。

希望我有意义。

淡化动画从Animate.css中拉出并直接插入到我的CSS中。

我可以在此处找到与此问题相关的所有代码

0.8

并在这里附带HTML

.widget-Button4.widget-header.widget-html-widget.widget p
{
  background:none;
  height: 50px;
  position: absolute;
  top: 250px;
  left: 1000px;
}

#Hosting
{
  background-image: url("images/header_rollout_expandedbg.png");
  background-size:100%;
  background-repeat:no-repeat;
  margin: 0 0 1em;
  font-size: 11px;
  line-height: 1.538em;
  float: left;
  padding: 20px 14px 14px 14px;
  position: absolute;
  top: 274px;
  left: 909px;
  z-index: 0;
  -webkit-animation:fadeOutUp 3.5s; /* Chrome, Safari, Opera */
  animation:fadeOutUp 3.5s;
  -webkit-transition: opacity 3.5s ease-in-out;
  -moz-transition: opactiy 3.5s ease-in-out;
  -ms-transition: opacity 3.5s ease-in-out;
  -o-transition: opacity 3.5s ease-in-out;
  transition: opacity 3.5s ease-in-out;
  filter: alpha(opacity=0);
  opacity: 0;
}

#HostingButton
{
  background-image: url("images/header_rolloutbg_static_complete.png");
  background-size:100%;
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 263px;
  left: 1007px;
  -webkit-transition: all 3.5s ease-in-out;
  -moz-transition: all 3.5s ease-in-out; 
  -o-transition: all 3.5s ease-in-out; 
  -ms-transition: all 3.5s ease-in-out;
  z-index: 50;
}

#HostingButton:hover
{
  -webkit-transform: rotate(1080deg); 
  -moz-transform: rotate(1080deg); 
  -o-transform: rotate(1080deg);
  -ms-transform: rotate(1080deg);
}

#HostingButton:hover + #Hosting
{
  -webkit-animation:fadeInDown 3.5s; /* Chrome, Safari, Opera */
  animation:fadeInDown 3.5s;
  transition: none;
  -o-transition: none;
  -ms-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

@-webkit-keyframes fadeInDown
{
    0%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
100%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}

@keyframes fadeInDown
{
0%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
100%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}

@-webkit-keyframes fadeOutUp
{
0%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
100%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

}

@keyframes fadeOutUp
{
0%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
100%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
}

我设法得到它的不透明度部分，我在JSFiddle工作时遇到了麻烦。 http://jsfiddle.net/7uR8z/1499/

这是我使用的相同代码，但我认为我可能会有一些冲突，我有一段时间试图解决它。

任何帮助将不胜感激！

Answer 1

你如何描述它是有2个div的地方。第一个div是可见的，第二个div是0不透明度。当您悬停时，第一个div为0不透明度，第二个div为80％不透明度。这种情况发生在3.5秒内。

我在不同的div .item和.description中创建了2个状态。不太清楚为什么你放大那里？如果这不是您正在尝试做的事，请告诉我。

.container {
    height:200px;
    width:200px;
    position:relative;
}
.item {
    height:200px;
    width:200px;
    position:absolute;
    background:red;
    -webkit-transition: opacity 3.5s ease-in;
    -moz-transition: opactiy 3.5s ease-in;
    -ms-transition: opacity 3.5s ease-in;
    -o-transition: opacity 3.5s ease-in;
    transition: opacity 3.5s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}
.item:hover {
    filter: alpha(opacity=0);
    opacity: 0;
}
.descriton {
    position:absolute;
    height:200px;
    width:200px;
    background:green;
    display:visible;
    -webkit-transition: opacity 3.5s ease-in;
    -moz-transition: opactiy 3.5s ease-in;
    -ms-transition: opacity 3.5s ease-in;
    -o-transition: opacity 3.5s ease-in;
    transition: opacity 3.5s ease-in;
    filter: alpha(opacity=0);
    opacity: 0;
}
.descriton:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
}

查看演示jsfiddle

CSS3动画仅适用于第一个悬停

1 个答案: