Question

我正在尝试将devicons应用到我的网站中，并且我已经成功完成了这项工作，但是当我将鼠标悬停在它们上面时，颜色并没有改变。

HTML CODE：

<div class="devicons devicons-java"> </div>

CSS代码：

.devicons {
    font-size: 150px;
    align-content: center;
    position: relative;
    text-align: center;
}
.devicons.active:hover {
    color: orange;
    -webkit-transition: width 2s;
    transition: width 2s;
}

.devicons {
    font-size: 150px;
    align-content: center;
    position: relative;
    text-align: center;
}
.devicons.active:hover {
    color: orange;
    -webkit-transition: width 2s;
    transition: width 2s;
}

<div class="devicons devicons-java"> ABCD </div>

但这对悬停没有任何作用？我现在不知道该怎么办？有人可以给我一个想法吗？

Answer 1

删除.active。

所以，它将是

.devicons:hover {
    color: orange;
    -webkit-transition: width 2s;
    transition: width 2s;
}

您的CSS正在寻找具有.active类别的.devicons。这就是为什么它不起作用。希望它有所帮助。

.devicons {
    font-size: 150px;
    align-content: center;
    position: relative;
    text-align: center;
}
.devicons:hover {
    color: orange;
    -webkit-transition: width 2s;
    transition: width 2s;
}

<div class="devicons devicons-java"> ABCD </div>

Answer 2

嗨，这是悬停和你想要悬停的效果：

.button:hover {
   position: absolute;
   transition: 1.9s;
   color:orange;
   opacity: 1;
}

Answer 3

删除.devicons.active中的.active：悬停应该可以解决问题

在悬停时更改颜色为devicons

3 个答案: