CSS를 입력 상자를 확장하고 입력을 허용하기 위해 일시 ​​중지

Question

사용자가 세부 정보를 입력 할 수있게 해주는 입력 상자를 확장하는 검색 아이콘 위로 마우스를 가져갈 수있는 방법을 배우려고합니다. 지금까지 CSS 솔루션을 발견했습니다. 호버가 작동하지만 작동하지 않는 것 같습니다. 이 작업을 수행하는 더 좋은 방법이 있습니까? 도와주세요.

이

이것은

<input type="text" class="search"/> 
<span class="searchicon"><i class="fa fa-search"></i></span> 

.search{ 
    display:none; 
    width:0; 
    transition: width 2s; 
} 

.searchicon:hover~.search{ 
    display:block; 
    width:197px; 
} 

Answer 1

~ 선택기가 첫 번째로 시작되는 경우에만 두 번째 요소와 일치 작동하지 않는 HTML/CSS입니다 jsfiddle https://jsfiddle.net/amosangyongjian/xzo0kaj5/

입니다. 이 작업을하기 위해 html에 범위를 입력 할 수 있습니다. 나는 이것을 달성하기 위해서만 CSS를 사용하는 것이 한계가 있다는 것을 알 수 있다고 생각한다. 더 좋은 옵션은 js를 사용하여 클래스를 적용하여 입력을 보여줌으로써 더 많은 제어권을 가질 수 있다는 것이다. 내가 본 몇 가지 문제를 극복하기 위해 몇 가지 추가 CSS 선택기 (.search : hover, .search : focus)를 추가했습니다. jQuery로 처리

.search{ 
 
    width:0; 
 
    visibility: hidden; /* display property wasn't working with transition */ 
 
    transition: width 2s; 
 
    float: left; 
 
} 
 

 
.searchicon:hover~.search, .search:hover, .search:focus{ 
 
    visibility: visible; 
 
    width:197px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="searchicon"><i class="fa fa-search"></i></span> 
 
<input type="text" class="search"/>

기본 예 :

$('.searchicon').hover(function() { 
 
    $('.search').addClass('show'); 
 
});

.search{ 
 
    width:0; 
 
    visibility: hidden; /* display property wasn't working with transition */ 
 
    transition: width 2s; 
 
    float: left; 
 
} 
 

 
.show { 
 
    visibility: visible; 
 
    width:197px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="searchicon"><i class="fa fa-search"></i></span> 
 
<input type="text" class="search"/>

Answer 2

그것이 앞에는 모든 .search 요소를 선택하기 때문에 귀하의 .searchicon:hover~.search 쿼리가 작동하지 않습니다 .searchicon:hover 요소. 귀하의 경우 .searchicon:hover은 .search 앞에 있으므로 작동하지 않을 것입니다.

<span class="searchicon"><i class="fa fa-search"></i></span> 
<input type="text" class="search"/> 

There is no a previuous sibling selector in CSS을, 당신은 당신이 이것을 달성하기 위해 자바 스크립트를 사용해야하는 HTML 구조를 유지하려면, 그래서 만약 :이처럼 span 태그 후 입력 텍스트를 이동하는 경우

효과

가 트리거됩니다.