закрыть окно поиска, нажав нестандартно

Question

мне нужна помощь, чтобы изменить эту модель окна поиска:

@import url(http://weloveiconfonts.com/api/?family=entypo); 
 

 
/* entypo */ 
 
[class*="entypo-"]:before { 
 
    font-family: 'entypo', sans-serif; 
 
    color: #C0C0C0; 
 
} 
 

 
* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 0px; 
 
    outline: 0px; 
 
    box-shadow: 0px; 
 
} 
 

 
body { 
 
    background-color: pink; 
 
} 
 

 
#container { 
 
    height: 300px; 
 
    margin-top: 10%; 
 
} 
 

 
.entypo-search:before { 
 
    position: absolute; 
 
    top: 0.4em; 
 
    left: 0px; 
 
} 
 

 
#form { 
 
    background-color: white; 
 
    border-radius: 30px; 
 
    padding: 10px 20px; 
 
    width: 13px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    height: 30px; 
 
    right: 50%; 
 
    -webkit-transition: width .55s ease; 
 
    -moz-transition: width .55s ease; 
 
    -ms-transition: width .55s ease; 
 
    -o-transition: width .55s ease; 
 
    transition: width .55s ease; 
 
} 
 

 
form { 
 
    position: relative; 
 
} 
 

 
input { 
 
    width: 0px; 
 
    height: 25px; 
 
    font-size: 15px; 
 
    margin-left: 30px; 
 
    /* margin-top: 3px; */ 
 
    line-height: 30px; 
 
} 
 

 
.entypo-search { 
 
    position: absolute; 
 
    top: 20%; 
 
} 
 

 
#form:hover { 
 
    width: 200px; 
 
} 
 

 
#form:hover form input { 
 
    width: 200px; 
 
} 
 

 
#form form input:focus, 
 
#form form input:active{ 
 
    outline:none; 
 
    width: 300px; 
 
}

<div id="container"> 
 
    <div id="form"> 
 
    <form action="#" class="entypo-search"> 
 
     <fieldset><input id="search" placeholder="Search" /></fieldset> 
 
    </form> 
 
    </div> 
 
</div>

окно поиска разворачивается и сворачивается при наведении курсора мыши, но есть проблема, если пользователь, например, нажав на раскрывающееся меню предложения, окно поиска больше не наведет, и окно поиска обрушится. Я хочу изменить его поведение, поэтому он будет закрываться/сжиматься только при щелчке мышью за пределами поля.

Спасибо.

Answer 1

Я реализовал некоторый javascript, который смотрит, когда вы наводите #form, а затем, когда вы нажимаете на .container. Я также удалил :hover css и сделал класс, который я включаю и выключаю в прослушивателях событий.

// closes the form when clicking its container. 
 
document.getElementById('container').addEventListener("click", function() { 
 
    document.getElementById("form").classList.remove("active"); 
 
}); 
 

 
// This stops the closing of the form when clicked 
 
document.getElementById('form').addEventListener("click", function(event) { 
 
    event.stopPropagation(); 
 
}); 
 

 
// open the form on mouseover 
 
document.getElementById('form').addEventListener("mouseover", function() { 
 
    document.getElementById("form").classList.add("active"); 
 
});

@import url(http://weloveiconfonts.com/api/?family=entypo); 
 

 
/* entypo */ 
 

 
[class*="entypo-"]:before { 
 
    font-family: 'entypo', sans-serif; 
 
    color: #C0C0C0; 
 
} 
 
* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 0px; 
 
    outline: 0px; 
 
    box-shadow: 0px; 
 
} 
 
body { 
 
    background-color: pink; 
 
} 
 
#container { 
 
    height: 300px; 
 
    margin-top: 10%; 
 
} 
 
.entypo-search:before { 
 
    position: absolute; 
 
    top: 0.4em; 
 
    left: 0px; 
 
} 
 
#form { 
 
    background-color: white; 
 
    border-radius: 30px; 
 
    padding: 10px 20px; 
 
    width: 13px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    height: 30px; 
 
    right: 50%; 
 
    -webkit-transition: width .55s ease; 
 
    -moz-transition: width .55s ease; 
 
    -ms-transition: width .55s ease; 
 
    -o-transition: width .55s ease; 
 
    transition: width .55s ease; 
 
} 
 
form { 
 
    position: relative; 
 
} 
 
input { 
 
    width: 0px; 
 
    height: 25px; 
 
    font-size: 15px; 
 
    margin-left: 30px; 
 
    /* margin-top: 3px; */ 
 
    line-height: 30px; 
 
} 
 
.entypo-search { 
 
    position: absolute; 
 
    top: 20%; 
 
} 
 
#form.active { 
 
    width: 200px; 
 
} 
 
#form.active form input { 
 
    width: 200px; 
 
} 
 
#form form input:focus, 
 
#form form input:active { 
 
    outline: none; 
 
    width: 300px; 
 
}

<div id="container"> 
 
    <div id="form"> 
 
    <form action="#" class="entypo-search active"> 
 
     <fieldset> 
 
     <input id="search" placeholder="Search" /> 
 
     </fieldset> 
 
    </form> 
 
    </div> 
 
</div>