我正在用 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/