gpt4 book ai didi

CSS 过渡

转载 作者:行者123 更新时间:2023-11-28 04:48:41 29 4
gpt4 key购买 nike

我正在用 CSS 制作一个表格,上面会有一些有趣的动画。单击文本字段时,它应该展开,但除此之外,它还应该使它旁边的按钮移动。谁能看到一个简单的方法来做到这一点?我在这里包含了代码:

<html> <head> <title></title>
<style>
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
}

input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
button.width:50%;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
}
</style>

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>


<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1></td>
</tr>

<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>

<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>

<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>

<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>

<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>

<tr>
<td style="padding-left:18px; padding-top:30px;"><input type="text" class="input1" placeholder="Enter name here..."></input></td>
</tr>

<tr>
<td style="padding-left:330px; padding-top:20px; padding-bottom:10px"><button class="button" style="padding: 8px">Submit score</button></td>
</tr>
</table>

</body>
</html>

最佳答案

如果你可以让按钮在输入之后(这样他们都是 sibling )你可以使用 general sibling selector : ~ .您感兴趣的部分是:

input[type="text"]:focus ~ .button {
/* Your styles here */
}

这有效地选择了:a .button它出现在一个聚焦的文本字段之后,只要它们是 sibling (即它们包含在同一个元素中)就可以工作。所以你不能将它们包装在单独的 <td> 中标签。

这当然是一个纯 CSS 解决方案,因此如果它们确实必须包装在单独的标签中,您将需要使用 JS。

.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
display: block;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
}
input[type=text]:focus + .button {
/* Whatever you want the button to do when the preceding input is focused */
min-width: 50%;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
min-width: 0;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
}
<html>

<head>
<title></title>

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>


<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1>
</td>
</tr>

<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>

<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>

<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>

<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>

<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>

<tr>
<td style="padding-left:18px; padding-top:30px; display:block">
<input type="text" class="input1" placeholder="Enter name here..."></input>
<button class="button">Submit score</button>
</td>
</tr>


</table>

</body>

</html>

关于CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40818654/

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