Question

我正在尝试缩放悬停按钮，但它不起作用。我找不到主要问题。这是代码：

.lead,
.lead:hover {
padding: 17px 50px;
color: #2e7c37;
background-color: #ffdc10;
font-family: "Roboto", Sans-serif;
font-size: 22px;
font-weight: 500;
border:none;
transition: all .3s 
}

.lead:hover,
.lead:focus,
.lead:active {
transform: scale(1.2);
}

.site-content a {
    color: #2e7d32 !important;
    text-decoration:none !important
}

有什么问题？为什么它不起作用？

Answer 1

链接（display）的默认<a>为inline。要允许调整大小和转换，您需要将display重置为任何其他值。这里inline-block应该没问题。

.lead {display:inline-block;}

此外，要对悬停做出反应，链接需要具有属性href，即使是空的。

下次，分享您的HTML

Answer 2

无需两次定义lead:hover课程。只需确保您只定义一次lead:hover课程。 .lead类的所有属性都会自动继承到.lead:hover状态。

悬停不起作用

2 个答案: