Question

我在CSS中制作一个表格，上面会有一些有趣的动画。单击文本字段时，它应该展开，但除此之外，还应使其侧面的按钮移动。谁能看到一个简单的方法呢？我在这里包含了代码：

＆＃13;

<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>

＆＃13;

Answer 1

如果您可以在输入后按下按钮（这样他们都是兄弟姐妹），您可以使用general sibling selector：~。您感兴趣的部分是：

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

这有效地选择：.button来自一个被聚焦的文本字段，并且只要它们是兄弟姐妹（即它们包含在同一个元素中）就可以工作。因此，您无法将它们包含在单独的<td>标记中。

这当然是一个纯CSS解决方案，所以如果他们做必须用不同的标签包装，你就需要使用JS。

＆＃13;

.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` */
}

＆＃13;

<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>

＆＃13;

CSS转换

1 个答案: