Html 过渡效应不起作用

我试图获得按钮的可见性与动画效果使用CSS过渡效果悬停，但效果不工作

我找不到我的错误，有人能帮我解决我的问题吗

我的HTML和CSS代码如下

.prodiv3
{
背景色：#d79e37；
位置：相对位置；
z指数：999；
}
.产品箱a
{
文字装饰：无；
}
.prodiv3 h2
{
填充：0px！重要；
保证金：0px！重要；
颜色：#fff；
左侧填充：15px！重要；
}
prodiv3.p
{
颜色：#000000；
左侧填充：15px！重要；
}
.链接图标
{
位置：相对位置；
底部：120px；
左：10px；
可见性：隐藏；
宽度：60px；
高度：60px；
背景：url（../images/link icon.png）无重复中心#ff411c；
//显示：块；
边界半径：100%；
}
.产品框a:悬停.链接图标
{
能见度：可见；
-moz转换：所有1都很容易进入！重要；
-webkit过渡：所有1都很容易进入！重要；
-o型过渡：所有1都容易进入！重要；
过渡：所有1轻松进入！重要；
}

---

您需要将转换应用于主类。不符合添加的效果/类别

.prodiv3
{
背景色：#d79e37；
位置：相对位置；
z指数：999；
}
.产品箱a
{
文字装饰：无；
}
.prodiv3 h2
{
填充：0px！重要；
保证金：0px！重要；
颜色：#fff；
左侧填充：15px！重要；
}
prodiv3.p
{
颜色：#000000；
左侧填充：15px！重要；
}
.链接图标
{
位置：相对位置；
底部：120px；
左：10px；
不透明度：0；
宽度：60px；
高度：60px；
背景：url（../images/link icon.png）无重复中心#ff411c；
//显示：块；
边界半径：100%；
-moz转换：所有1都很容易进入！重要；
-webkit过渡：所有1都很容易进入！重要；
-o型过渡：所有1都容易进入！重要；
过渡：所有1轻松进入！重要；
}
.产品框a:悬停.链接图标
{
不透明度：1；
}

---

您需要将转换应用于主类。不符合添加的效果/类别

.prodiv3
{
背景色：#d79e37；
位置：相对位置；
z指数：999；
}
.产品箱a
{
文字装饰：无；
}
.prodiv3 h2
{
填充：0px！重要；
保证金：0px！重要；
颜色：#fff；
左侧填充：15px！重要；
}
prodiv3.p
{
颜色：#000000；
左侧填充：15px！重要；
}
.链接图标
{
位置：相对位置；
底部：120px；
左：10px；
不透明度：0；
宽度：60px；
高度：60px；
背景：url（../images/link icon.png）无重复中心#ff411c；
//显示：块；
边界半径：100%；
-moz转换：所有1都很容易进入！重要；
-webkit过渡：所有1都很容易进入！重要；
-o型过渡：所有1都容易进入！重要；
过渡：所有1轻松进入！重要；
}
.产品框a:悬停.链接图标
{
不透明度：1；
}

---

使用

不透明度

0和1代替可视性：

.prodiv3
{
背景色：#d79e37；
位置：相对位置；
z指数：999；
}
.产品箱a
{
文字装饰：无；
}
.prodiv3 h2
{
填充：0px！重要；
保证金：0px！重要；
颜色：#fff；
左侧填充：15px！重要；
}
prodiv3.p
{
颜色：#000000；
左侧填充：15px！重要；
}
.链接图标
{
位置：相对位置；
底部：120px；
左：10px；
不透明度：0；
宽度：60px；
高度：60px；
背景：url（../images/link icon.png）无重复中心#ff411c；
//显示：块；
边界半径：100%；
}
.产品框a:悬停.链接图标
{
不透明度：1；
-moz转换：所有1都很容易进入！重要；
-webkit过渡：所有1都很容易进入！重要；
-o型过渡：所有1都容易进入！重要；
过渡：所有1轻松进入！重要；
}

---

使用

不透明度

0和1代替可视性：

.prodiv3
{
背景色：#d79e37；
位置：相对位置；
z指数：999；
}
.产品箱a
{
文字装饰：无；
}
.prodiv3 h2
{
填充：0px！重要；
保证金：0px！重要；
颜色：#fff；
左侧填充：15px！重要；
}
prodiv3.p
{
颜色：#000000；
左侧填充：15px！重要；
}
.链接图标
{
位置：相对位置；
底部：120px；
左：10px；
不透明度：0；
宽度：60px；
高度：60px；
背景：url（../images/link icon.png）无重复中心#ff411c；
//显示：块；
边界半径：100%；
}
.产品框a:悬停.链接图标
{
不透明度：1；
-moz转换：所有1都很容易进入！重要；
-webkit过渡：所有1都很容易进入！重要；
-o型过渡：所有1都容易进入！重要；
过渡：所有1轻松进入！重要；
}

transition

可用于数字值，如

0

和

1

。因此，它不适用于

可见性

或

显示

转换

等数字值，如

0

和

1

。因此它不适用于

可见性

或

显示

。是的，当然！但是另一种想法。如果我想要这样的效果-），那么我需要做的是为叠加颜色添加一个过渡，为垂直线添加一个过渡。到。产品箱抱歉，我不明白。是的，当然！但是另一种想法。如果我想要这样的效果-），那么我需要做的是为叠加颜色添加一个过渡，为垂直线添加一个过渡。到产品盒