Добрый день! Пытаюсь сделать иммитацию <select>
. После клика перестает работать hover
. Подскажите, пожалуйста, в чем проблема и как ее решить?
var listWrap = document.getElementById("listWrap");
listWrap.addEventListener("click", getChoice);
function getChoice(){
listWrap.style.display = "none";
}
#select{
display: flex;
justify-content: flex-start;
flex-direction: column;
position: relative;
}
#select:hover>#listWrap{
display:block;
}
#listWrap{
display: none;
margin:0;
padding: 0;
width: 250px;
list-style-type: none;
max-height: 300px;
overflow: auto;
border: 1px solid;
border-color: rgb(169, 169, 169);
font-size: 13.33333px;
font-family: Arial;
color: black;
position: absolute;
top:17px;
background-color: white;
z-index: 10;
}
#listWrap:hover{
border-color: rgb(77, 144, 254);
}
.list{
min-height: 16px;
padding-bottom: 1px;
padding-right: 2px;
padding-left: 2px;
margin-bottom: 3px;
margin-top: 3px;
}
.list:hover{
background-color: rgb(0, 144, 254);
color: white;
}
.text{
margin:0;
padding: 0;
width: 170px;
position: relative;
font-family: Arial;
font-size: 13.3333px;
font-stretch: 100%;
font-weight: 400;
border: 1px solid;
border-color: rgb(169, 169, 169);
align-items: center;
padding-left: 3px;
font-stretch: 100%;
color: black;
}
.text:hover{
outline-width: 5px;
outline-style: auto;
outline-color: rgb(77, 144, 254);
}
<div id="select">
<p class="text">Сделайте выбор</p>
<ul id="listWrap">
<li class="list">Lorem ipsum dolor sit amet.</li>
<li class="list">Lorem ipsum dolor sit amet.</li>
<li class="list">Lorem ipsum dolor sit amet.</li>
<li class="list">Lorem ipsum dolor sit amet.</li>
<li class="list">Lorem ipsum dolor sit amet.</li>
<li class="list">Lorem ipsum dolor sit amet.</li>
<li class="list">Lorem ipsum dolor sit amet.</li>
</ul>
</div>