我如何同时拥有 :hover 和 transition-delay?
How do I have both :hover and transition-delay?
我有一个按钮,里面有一些 CSS:
button {
visibility: visible;
padding: 12px;
background-color: var(--dracula-accent);
border-radius: 50%;
margin-bottom: 2em;
}
我想在上面添加一些悬停效果
button:hover {
background-color: #6272a4;
}
但是悬停5秒后,我想让按钮改变它的大小和内容
button:hover {
background-color: #000000;
width: 100px;
content: "click me"
transition-delay: 5s;
}
但是拥有所有这些是行不通的。我不想使用 Javascript,我只使用 CSS。
首先,如果您希望在悬停和鼠标移开时有不同的延迟值,您需要将过渡设置同时设置为 button
和 button:hover
。
其次,如果您想在 属性 上进行过渡,例如 width
,如果您在 button
上指定其初始值,效果会更好。
最后,您可以使用 ::after
伪元素来实现所需的结果:
你的HTML
<button>click me</button>
你的CSS
button {
padding: 12px;
border-radius: 50%;
margin-bottom: 2em;
position: relative;
transition-delay: 0s;
background-color: #6272a4;
width: 100px;
}
button::after {
content:"test";
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
padding: 12px;
border-radius: 50%;
background-color: red;
}
button:hover::after {
display: none;
}
button:hover {
background-color: #000000;
width: 250px;
transition-delay: 2s;
color: red;
}
如果需要,您可以添加过渡时间和缓和。
我有一个按钮,里面有一些 CSS:
button {
visibility: visible;
padding: 12px;
background-color: var(--dracula-accent);
border-radius: 50%;
margin-bottom: 2em;
}
我想在上面添加一些悬停效果
button:hover {
background-color: #6272a4;
}
但是悬停5秒后,我想让按钮改变它的大小和内容
button:hover {
background-color: #000000;
width: 100px;
content: "click me"
transition-delay: 5s;
}
但是拥有所有这些是行不通的。我不想使用 Javascript,我只使用 CSS。
首先,如果您希望在悬停和鼠标移开时有不同的延迟值,您需要将过渡设置同时设置为 button
和 button:hover
。
其次,如果您想在 属性 上进行过渡,例如 width
,如果您在 button
上指定其初始值,效果会更好。
最后,您可以使用 ::after
伪元素来实现所需的结果:
你的HTML
<button>click me</button>
你的CSS
button {
padding: 12px;
border-radius: 50%;
margin-bottom: 2em;
position: relative;
transition-delay: 0s;
background-color: #6272a4;
width: 100px;
}
button::after {
content:"test";
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
padding: 12px;
border-radius: 50%;
background-color: red;
}
button:hover::after {
display: none;
}
button:hover {
background-color: #000000;
width: 250px;
transition-delay: 2s;
color: red;
}
如果需要,您可以添加过渡时间和缓和。