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

Question

[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;
}

Comments

[Lord_Dantes]

фокус и дисплей блок. что же еще

[Lord_Dantes]

Ладно посмотрев ваш код я пришел к тому что через CSS такое думаю не реализовать, хотя бы потому-что фокус идет на инпут..

Поэтому ловите фокус на JS и выставляйте класс родителю чата допустим актив и этому классу опасити 1

Answer 1

[Александр Таратин]

<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...