Question

不确定我在这里做错了什么。悬停肯定是有效的，因为顶部和底部属性会发生变化，但转换不存在。

a:1:{i:0;O:24:"frontend\models\Customer":12:{s:35:"yii\elasticsearch\ActiveRecord_id";s:2:"18";s:38:"yii\elasticsearch\ActiveRecord_score";d:1.058217;s:40:"yii\elasticsearch\ActiveRecord_version";N;s:42:"yii\elasticsearch\ActiveRecord_highlight";N;s:36:"yii\db\BaseActiveRecord_attributes";a:2:{s:4:"name";s:12:"peter george";s:7:"address";s:6:"langer";}s:39:"yii\db\BaseActiveRecord_oldAttributes";a:2:{s:4:"name";s:12:"peter george";s:7:"address";s:6:"langer";}s:33:"yii\db\BaseActiveRecord_related";a:0:{}s:23:"yii\base\Model_errors";N;s:27:"yii\base\Model_validators";N;s:25:"yii\base\Model_scenario";s:7:"default";s:27:"yii\base\Component_events";a:0:{}s:30:"yii\base\Component_behaviors";a:0:{}}}

使用jade，这是标记

.info{
  position:absolute;
  transition: opacity 2s; 
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
  background:rgba(0,0,0,0.8);
  color:white;
  text-align:center;
  justify-content:center;
  display:none;
  opacity:0; 
}


.content ul li:hover .info{
  top:-10px;
  bottom:10px;
  opacity:1;
  display:flex;
}

非常感谢任何帮助：）

Answer 1

这是因为您指定的display属性（display:none）。如果您删除display:none，它应该可以正常工作。 display属性无法转换。

尝试：

.info{
   position:absolute;
   transition: opacity 2s; 
   top:0;
   bottom:0;
   right:0;
   left:0;
   background:rgba(0,0,0,0.8);
   color:white;
   text-align:center;
   justify-content:center;
   opacity:0; 
}

CSS Transition无法正常工作

1 个答案: