@ICE777

Как заставить чат оставатся видимым во время печати в нём?

И так в одной браузерной игре есть чат, я создавая мод хотел сделать чтобы он исчезал (становится прозрачным) когда я им не пользуюсь и это у меня получилось но возникла проблема он становится активным (прозрачность пропадает) когда я навожу на нём мышь лишь а если пример я буду печатать в нём но мыши на нем не будет то он будет исчезать, как мне сделать когда я в инпуте печатаю или просто на нём сфокусировался (мышкой на него нажал) чтобы он не пропадал?

Примерная структура
<div id="chat">
<div id="chat-window">...</div> // messages will be shown here from others or me
<input id="chat-input"> // the input in which will be made a message
</div>


#chat{
width: 200px;
height: 150px;
opacity: 0;
    background-color: rgba(0,0,0,.5);
    word-wrap: break-word;
     top: 85px;
     border-radius: 10px 10px 10px 10px;
    transition: ease-out 1.5s;
}
 #chat:hover, #chat:active{
opacity: 1;
    transition: ease-out 0.33s;
}
 #chat-input {
     border-radius: 0px 0px 10px 10px;
     padding: 10px;
     color: #ffffff;
     background: rgba(0, 0, 0, 0.75);
     border: hidden;
     outline:none;
font: Snell Roundhand, cursive;
}
#chat-input:focus{
opacity: 1;
transition: ease-out 0.33s;
}
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
<div id="chat">
<div id="chat-window">...</div>
// messages will be shown here from others or me
<input id="chat-input"> 
// the input in which will be made a message
</div>

#chat {
  width: 200px;
  height: 150px;
  opacity: 0.2;
  background-color: rgba(0, 0, 0, 0.5);
  word-wrap: break-word;
  top: 85px;
  border-radius: 10px 10px 10px 10px;
  transition: ease-out 0.2s;
}
#chat:hover,
#chat:focus-within {
  opacity: 1;
  transition: ease-out 0.2s;
}
#chat-input {
  border-radius: 0px 0px 10px 10px;
  padding: 10px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  border: hidden;
  outline: none;
  font: Snell Roundhand, cursive;
}


https://jsfiddle.net/84nbxy23/
Обратите внимание на поддержку
https://developer.mozilla.org/ru/docs/Web/CSS/:foc...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы