Блоки, отслеживание курсора HTML

Question

Есть задание для практики. Вообщем, есть два блока ("Блок 1.1, Блок 2.1") при наведении курсора на "Блок1.1", выводится "Блок 1.2" с текстом в середине (К примеру текст в середине будет "Текст1"). После отведения курсора "Блок 1.2" с текстом пропадает. А при наведении курсора на "Блок 2.1", выводится "Блок 2.2" так же с текстом, но "Блок 2.2" должен покрывать "Блок 1.2". Для более хорошего понятия, я нарисовал схему. Схема Все, что сделал я, это "Блок 1.1" и "Блок 2.1"

.blockone{    
    width: 100px;
    height: 25px;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;}
.blocktwo
{    
    width: 100px;
    height: 25px;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    }
.wrap
{    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;}

<div class="wrap">
        <div class="blockone">
            Блок 1.1
        </div></a>
        <div class="blocktwo">
            Блок 2.1
        </div></a>
    </div>

Надеюсь, поможете)

Answer 1

document.querySelector('.block-two').addEventListener('mouseover', () => {
  document.querySelector('.wrap-two').classList.add('show');
});
document.querySelector('.block-two').addEventListener('mouseout', () => {
  document.querySelector('.wrap-two').classList.remove('show');
});

.container {
  display: flex;
  align-items: flex-end;
}

.wrap,
.wrap-two {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 50px;
}

.block-one,
.block-two {
  cursor: pointer;
  width: 100px;
  transition: all 0.3s ease-in-out;
  border: 1px solid #000;
}

.supblock-one {
  opacity: 0;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #000;
  transition: all 0.3s ease-in-out;
  order: -1;
}

.supblock-two {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  order: -1;
  padding: 50px;
  text-align: center;
}

.block-one:hover+.supblock-one {
  opacity: 1;
}

.block-two:hover {
  margin-left: 15px;
  margin-bottom: 15px;
}

.wrap-two.show {
  border: 1px solid #000;
}

.block-two:hover+.supblock-two {
  opacity: 1;
}

<div class="container">
  <div class="wrap">
    <div class="block-one">Блок 1.1</div>
    <div class="supblock-one">Текст 1</div>
  </div>
  <div class="wrap-two">
    <div class="block-two">Блок 2.1</div>
    <div class="supblock-two">Текст 2</div>
  </div>
</div>

БЛОГ НА HUSL

Блоки, отслеживание курсора HTML

Ответы (1 шт):