CSSのトランジション

CSSでテーブルを作成していて、面白いアニメーションがいくつかあります。テキストフィールドをクリックすると拡大するはずですが、これに加えて、その横のボタンも移動させる必要があります。誰もがこれを行う簡単な方法を見ることができますか？ ~：（彼らは両方の兄弟であるように）あなたはgeneral sibling selectorを使用することができ、ボタンを入力した後に行かせることができる場合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

：私はここにコードを含めました。これは、効果的に選択

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

答えて

関連する問題