как навести HTML одинаковый идентификатор другого класса? - PullRequest
Новая
       4

как навести HTML одинаковый идентификатор другого класса?

0 голосов
/ 12 июля 2020 

       #menu .bar .a:hover  #menu .item .m1{
            display : block;
        }

   
    </style>
</head>
<body>
    <div id="menu">
        <div class="bar">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
        </div>
    
        <div class="item">item
        <div class="m1">m1</div>
        <div class="m2">m2</div>
        <div class="m3">m3</div>
        </div>

        <div class="contents">contents</div>
    </div>
</body>
</html>
Я пробовал много раз, но не могу получить результаты

введите описание изображения здесь

если я наведу курсор на поле a, я хочу увидеть поле m1

Пожалуйста, помогите мне ~~~~~~~~~~~~~~ ~~~~~~~~~~~ нужна помощь ~~~~~~~~~~~~~~~~~~~

1 Ответ

0 голосов
/ 12 июля 2020 

.menu:hover + .item{
  display: block;
}

.item{
  display: none;
  position: absolute;
  top: 50px;
}

#menu{
  position: relative;
}
<html>
  <body>
    <div id="menu">
      <div class="menu a">a</div>
      <div class="item m1">m1</div>
      <div class="menu b">b</div>
      <div class="item m2">m2</div>
      <div class="menu c">c</div>
      <div class="item m3">m3</div>
    </div>
  </div>
  </body>
</html>

Это то, что вы хотите получить?

Изменить : вы можете добавить код js между скриптами теги внизу документа html. 

  let bar = document.getElementsByClassName('bar')[0];
  let items = document.getElementsByClassName('item')[0];
  for (const item of bar.children){
    item.addEventListener('mouseenter', function(){
      let index = Array.from(bar.children).indexOf(event.currentTarget);
      items.children[index].style.display = 'block';
    });

    item.addEventListener('mouseleave', function(){
      for (const item of items.children){
        item.style.display = 'none';
      };
  });
  }
.item > *{
  display: none;
}
<html>
  <body>
    <div id="menu">
        <div class="bar">
          <div class="a">a</div>
          <div class="b">b</div>
          <div class="c">c</div>
        </div>
    
        <div class="item">
          <div class="m1">m1</div>
          <div class="m2">m2</div>
          <div class="m3">m3</div>
        </div>

        <div class="contents">contents</div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...