0

Добрый день! Пытаюсь сделать иммитацию <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>

3 ответа 3

3

Вы прописали display через css а по событию оно прописывается в атрибуте, который перекрывает стиль. Я написал два наблюдателя и закомментировал ваш стиль :hover.

var listWrap = document.getElementById("listWrap");
listWrap.addEventListener("click", getChoice);
var select = document.getElementById("select");
select.onmouseover = function() {
    listWrap.style.display = "block";
}
select.onmouseout = function() {
    listWrap.style.display = "none";
}

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>

3
  • Спасибо, понятно. Но есть 2 момента. 1) hover лучше имитировать с помощью mouseenter/mouseleave 2) в данном случае это не целесообразно.
    – Dmytro
    Commented 19 мар. 2018 в 18:23
  • 1. Само собой; 2 Да, этот стиль просто не работает, я закомментировал, чтобы обратить внимание.
    – axdrv
    Commented 19 мар. 2018 в 18:31
  • Добавьте в свой ответ код Игоря - поставлю галочку
    – Dmytro
    Commented 19 мар. 2018 в 19:52
3
function getChoice(){
  listWrap.style.display = "none";
  setTimeout(function(){
    listWrap.style.display = "";
  }, 50);
}
5
  • 1
    Спасибо, а ларчик-то просто открывался)
    – Dmytro
    Commented 19 мар. 2018 в 18:25
  • Вот как быть? Какой ответ принять? Вы отвечаете на вопрос "как исправить", а рядом отвечают на вопрос "в чем проблема"?)
    – Dmytro
    Commented 19 мар. 2018 в 18:28
  • Ответ Igor продиктован опытом и учит новичков замечательному приёму. Я его плюсанул.
    – axdrv
    Commented 19 мар. 2018 в 18:36
  • @АлексейДрижаков Надеюсь, это был сарказм :). Мой ответ - это образец костыля. Ваш ответ плюсанул.
    – user176262
    Commented 19 мар. 2018 в 19:03
  • @Igor, как ходить не умею, так и костылям рад :-)
    – axdrv
    Commented 19 мар. 2018 в 19:22
1

У вас style="display: none;" добавляется инлайново, поэтому hover срабатывает, но перекрывается

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.