CSS - как отображать значки при просмотре div

#html #css #sass

Вопрос:

Привет, я просто хотел показать значки, когда вы переходите в раздел. У меня там уже есть Опакция, но я не знаю, что делать дальше.

  .new-tasks .item-controls  {
        opacity: 0;
        .item-controls{
          amp;:hover {
            opacity: 1;
          }
        }
        }

 <div class="content">
        <h2 class="head">School</h2>
        <div class="inout">
          <input
            id="storageTask"
            type="text"
            name="item"
            class="text"
            placeholder="Enter a new Tasks..."
          />
          <button class="enter">
            <i class="fas fa-plus" id="plus"></i>
          </button>
        </div>
        <div class="list">
          <ul class="list-container"></ul>
          </div>
        </div>

 
    let controlIcons = document.createElement("div");
    controlIcons.setAttribute("class", "item-controls")
    let spanDel = document.createElement("span");
    let spanDone = document.createElement("span");
    
    let done = document.createElement("done-button");
    let del = document.createElement("del-button");

    spanDel.appendChild(done);
    spanDone.appendChild(del);

    
    controlIcons.appendChild(spanDel);
    controlIcons.appendChild(spanDone);
    
    spanDel.setAttribute("class", "delete");
    spanDone.setAttribute("class", "finish");

Правка: Я надеюсь, что этому можно помочь. С дисплеем:блок и дисплей:нет это не работает.

значки создаются на javascript в элементах управления. И «новая задача»-это новый ввод. раздел элементов управления находится в разделе «список».

Спасибо за помощь моим братьям

1. Привет! Добро пожаловать в Stackoverflow. Пожалуйста, вы можете добавить больше кода, чтобы мы могли лучше понять ваш вопрос. Можете ли вы показать нам используемый HTML (включая HTML, созданный на основе Javascript)?

2. вы можете показать свой полный код ?

Ответ №1:

вы можете отправиться в display:none; путешествие и display:block; когда

создайте div в html, задайте для него пользовательские свойства, как вам нравится(ширина и т.д.), С помощью значка из js. Затем добавьте css для нормального и текущего состояния.

Ответ №2:

CSS может быть обновлен следующим образом:

 .item-controls{
   display: none;
}
.item-controls:hover{
   display: block (or whatever display you'd like)
}

Приведенный выше код скроет элемент управления элементом по умолчанию (с display:none ) и покажет его при наведении курсора с display:block помощью .

Ответ №3:

 .show{ 
display: none;
}
.show-other:hover .show{
display : block;
}

 <div class="show-other">HOVER ME
<div class="show">Everything!</div>

</div>