CSS逆の遷移と前の兄弟の選択

ブートストラップコンテナは水平に2つのフォームがあります。 Form1にカーソルを置くと、幅が広がり、form2の幅が小さくなります。しかし、逆は起こっていません。どんな提案もお願いします。CSS逆の遷移と前の兄弟の選択

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <style> 
    #row{ 
    background-color: lightblue; 
    border-style: groove; 
    } 

    #form1{ 
    background-color: lightgreen; 
    width: 50%; 
    transition: width 0.75s ease; 
    } 

    #form1:hover{ 
    width: 75%; 
    } 

    #form1:hover + #form2{ 
    width: 25% 
    } 

    #form2{ 
    background-color: orange; 
    width: 50%; 
    transition: width 0.75s ease; 
    } 

    #form2:hover{ 
    width: 75%; 
    } 

    #form2:hover ~ #form1{ 
    width: 25% 
    } 
    </style> 


</head> 
<body> 

<div class="container" > 

    <div id="row" class="row" > 
    <div id="form1" class="col-sm-6"> 
    <!-- form1 --> 
     <form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Email:</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="pwd">Password:</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </div> 
    </div> 
</form> 
    </div> 
    <div id="form2" class="col-sm-6"> 
    <!-- form 2 --> 
     <form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Email:</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="pwd">Password:</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </div> 
    </div> 
</form> 
    </div> 
</div> 

</div> 

</body> 
</html>

以下の画像を参照してください。グリーンフォーム上をホバリングすると、フォームが左から右に移動し、オレンジフォームは幅を縮小し、緑フォームは幅を増加させますが、オレンジフォーム（逆方向）でホバリングしている間はこれは起こりません。

基本的に私はあなたがflexboxでこれを行うことができTHIS

出典

2017-01-05 Selva

CSSは一のyの前にいないの後にくる兄弟を選択することができますou指定します。言い換えれば、それを振り返ることはできません。 – pol

のような形を達成しようとしています。 Selvaが言及したように、CSSは前の兄弟ではなく次の兄弟を選択することができます。しかし、フレキシボックスでこれは非常に簡単です：

.flexible{display: flex; flex-direction: row;} 
#form1:hover{ 
    width: 100%; 
} 
#form2:hover{ 
    width: 100%; 
}

https://jsfiddle.net/2g4krj0f/

出典

2017-01-05 19:46:41

答えてくれてありがとう、私はCSSをとても使い慣れているので、うまくいくためにはフレックスについて学ぶ必要があります:)。基本的に私はリンクのように達成しようとしています：https://site.uplabs.com/posts/sign-in-and-sign-out – Selva

私がどんなフォームにもホバーするならば、他のフォームは小さくするべきです幅を10 ％ - 20％、その幅ではサインイン/サインアップアイコンのみを表示します。どうすればこれを実現できますか？ – Selva

私のフィドルを更新して、お楽しみください。 https://jsfiddle.net/2g4krj0f/1/ –

純粋なCSSで解決策が存在します。このフォームはunhoveredされたときに行が推移しているときは、Form1を選択するセレクタのCSSルールを定義する必要があります。#row:hover > #form1:not(:hover)

#row:hover > #form1:not(:hover){ 
    width: 25%; 
}

http://www.codeply.com/go/0Q2gFDoc4y

スニペットを見て（それは、フルスクリーンモードで動作し、いくつかの理由で）：

#row{ 
 
    background-color: lightblue; 
 
    border-style: groove; 
 
    } 
 

 
    #form1{ 
 
    background-color: lightgreen; 
 
    width: 50%; 
 
    transition: width 0.75s ease; 
 
    } 
 

 
    #form1:hover{ 
 
    width: 75%; 
 
    } 
 

 
    #form1:hover + #form2{ 
 
    width: 25% 
 
    } 
 

 
    #form2{ 
 
    background-color: orange; 
 
    width: 50%; 
 
    transition: width 0.75s ease; 
 
    } 
 

 
    #form2:hover{ 
 
    width: 75%; 
 
    } 
 

 
    #row:hover > #form1:not(:hover){ 
 
    width: 25%; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" > 
 

 
    <div id="row" class="row" > 
 
    <div id="form1" class="col-xs-6"> 
 
    <!-- form1 --> 
 
     <form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-xs-2" for="email">Email:</label> 
 
    <div class="col-xs-10"> 
 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-xs-2" for="pwd">Password:</label> 
 
    <div class="col-xs-10"> 
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-xs-offset-2 col-xs-10"> 
 
     <div class="checkbox"> 
 
     <label><input type="checkbox"> Remember me</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-xs-offset-2 col-xs-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </div> 
 
    </div> 
 
</form> 
 
    </div> 
 
    <div id="form2" class="col-xs-6"> 
 
    <!-- form 2 --> 
 
     <form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-xs-2" for="email">Email:</label> 
 
    <div class="col-xs-10"> 
 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="control-label col-xs-2" for="pwd">Password:</label> 
 
    <div class="col-xs-10"> 
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-xs-offset-2 col-xs-10"> 
 
     <div class="checkbox"> 
 
     <label><input type="checkbox"> Remember me</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-xs-offset-2 col-xs-10"> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </div> 
 
    </div> 
 
</form> 
 
    </div> 
 
</div> 
 

 
</div>

出典

2017-01-05 19:49:43 Banzay

答えをありがとう、私はチェックした、私は行にホバーし、時々私はオレンジのフォームにマウスを移動するときに動作していません。 – Selva

CSS逆の遷移と前の兄弟の選択

答えて

関連する問題