CSS 역전 전환하고 이전 형제를 선택하십시오.

부트 스트랩 컨테이너에는 수평으로 두 가지 형태가 있습니다. 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는 이전 형이 아닌 다음 형제를 선택할 수 있습니다. 그러나 인 flexbox으로이 훨씬 쉽습니다 : 순수 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가 처음인데, 잘 작동하려면 flex에 대해 배워야합니다. :) 기본적으로 나는 링크에서와 같이 달성하기 위해 노력하고 있습니다 : https://site.uplabs.com/posts/sign-in-and-sign-out – Selva

어떤 양식을 가리키면 다른 양식이 줄어들 것입니다 너비를 10 % - 20 %, 그 너비에는 Sign In/Sign Up 아이콘 만 표시됩니다. 이것을 어떻게 할 수 있습니까? – Selva

내 바이올린을 업데이트하고 즐기십시오. https://jsfiddle.net/2g4krj0f/1/ –

솔루션은 존재한다. 이 양식은 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 역전 전환하고 이전 형제를 선택하십시오.

답변

관련 문제