CSS 변환

CSS로 흥미로운 애니메이션이있는 표를 만들고 있습니다. 텍스트 필드를 클릭하면 확장되어야하지만이 외에도 텍스트 필드 옆에있는 버튼도 이동해야합니다. 누구든지이 일을하는 쉬운 방법을 볼 수 있습니까? 나는 여기에 코드를 포함 시켰습니다 : ~ :CSS 변환

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

 
input[type=text]:focus { 
 
    background-color: #E8E8E8; 
 
\t width: 45%; 
 
\t button.width:50%; 
 
} 
 
.button { 
 
\t background-color: #34B0D9; 
 
\t radius: 12px; 
 
\t color: white; 
 
\t padding: 12px; 
 
\t border: none; 
 
\t border-radius: 5px; 
 
\t font-family: calibri; 
 
\t 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;"> 
 
\t <tr> 
 
\t \t <td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1></td> 
 
\t </tr> 
 
\t 
 
\t <tr style="background-color:#E8E8E8"> 
 
\t \t <td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td> 
 
\t </tr> 
 
\t 
 
\t <tr> 
 
\t \t <td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td> 
 
\t </tr> 
 
\t 
 
\t <tr style="background-color:#E8E8E8"> 
 
\t \t <td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td> 
 
\t </tr> 
 
\t 
 
\t <tr> 
 
\t \t <td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td> 
 
\t </tr> 
 
\t 
 
\t <tr style="background-color:#E8E8E8"> 
 
\t \t <td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td> 
 
\t </tr> 
 
\t 
 
\t <tr> 
 
\t \t <td style="padding-left:18px; padding-top:30px;"><input type="text" class="input1" placeholder="Enter name here..."></input></td> 
 
\t </tr> 
 
\t 
 
\t <tr> 
 
\t \t <td style="padding-left:330px; padding-top:20px; padding-bottom:10px"><button class="button" style="padding: 8px">Submit score</button></td> 
 
\t </tr> 
 
</table> 
 

 
</body> 
 
</html>

출처

2016-11-26 Maxim Webb

당신이 (그들은 모두 형제입니다 있도록)는 general sibling selector을 사용할 수있는 버튼 입력 후 갈 수 있도록 할 수 있습니다. 이 효과적으로 선택

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

: 당신이에 관심이있을 거라고 부분은 집중되는 텍스트 필드 다음에 오는 .button, 그리고 그들이있는 한 작동 형제 (그들은 같은 내에 포함 된 즉, 요소). 따라서 별도의 <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>

출처

2016-11-26 18:07:24 Dre

답변

관련 문제