Question

到目前为止，我已经设置了jsfiddle代码。基本上我似乎无法使用悬停在每个ul中的主体文本进行翻转动画。

因此，当您在各个区域翻转这些类的不透明度代码时......

.browser .statistic,
.browser .download {
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

成为1.但我似乎无法让过渡动画发生可以有人指出我正确的方向。

干杯，格雷格。

Answer 1

您需要在要设置动画的对象的主类上设置转换，而不是在悬停时添加的类上设置转换

public function getTotalCart($items, $cart)
    $qtyTotal = 0;
    foreach($cart as $id => $quantity) {
        $qtyTotal += $quantity * $items[$id]->getFinal();
    }
    return $qtyTotal;
}

Answer 2

抱歉，如果我想念你。

我刚补充说：

li:hover .browser * {
    opacity: 1;
    -webkit-transition:opacity 1500ms ease-out;
    -moz-transition:opacity 1500ms ease-out;
    -o-transition:opacity 1500ms ease-out;
    transition:opacity 1500ms ease-out;
}

DEMO： http://jsfiddle.net/zn09vjbv/1/

<强>更新

有没有办法获得＆＃34; h2 span＆＃34;上课也要改变它李在悬停时的背景位置？

是的，只需添加:(在此课程中添加您喜欢的任何属性）

li:hover .browser h2 {
    background: #000;
    color; #FFF;
    ......
}

用于悬停效果的CSS动画

2 个答案: