gpt4 book ai didi

html - 为什么我的代码获取屏幕宽度而不是父级?

转载 作者:太空宇宙 更新时间:2023-11-04 15:52:54 25 4
gpt4 key购买 nike

所以,例如.. 当我将鼠标悬停在我的按钮上时,我想要一条线从按钮的中间到边缘缩放。但它获取屏幕的宽度并将其缩放到该宽度。这是 JSFiddle 上的示例,希望对您有所帮助!

https://jsfiddle.net/RVKuzmik/kabnL1yw/

<html lang="en">
<head>
</head>
<body>
<h1 id="connectbtn">
test
</h1>
</body>
</html>


#connectbtn {
text-align: center;
color: red;
}

#connectbtn:before {
content: "";
position: absolute;
width: 100%;
height: 1%;
background-color: tomato;
visibility: hidden;
transform: scaleX(0);
transition: all 0.15s ease-in-out 0s;
}

#connectbtn:hover:before {
visibility: visible;
transform: scaleX(1);
}

最佳答案

#connectbtn:before 一个 left: 0;位置

#connectbtn:before {
content: "";
position: absolute;
width: 100%;
height: 1%;
background-color: tomato;
visibility: hidden;
transform: scaleX(0);
left: 0;
transition: all 0.15s ease-in-out 0s;
}

关于html - 为什么我的代码获取屏幕宽度而不是父级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48452751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com