Блог

Главная - Вопросы по программированию - Div перед другим с наведением

Div перед другим с наведением

#css

#css

Вопрос:

Я пытаюсь сделать так, чтобы имя пользователя, пароль div отображались перед другим div с изображениями. Я пробовал разные варианты, но, похоже, ни один из них не работает. Когда я заставляю это работать, поля или отступы все портят.

 .imagesparent{
}
.images{
  display: flex;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  justify-content: center;
  text-align: center;
}
.joinus{
  visibility:hidden;
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 300px;
}
.images:hover   .joinus{
  visibility: visible;
  background-color: blue;
}  
 <div class="imagesparent">
  <div class="images">
    <img src="polohombrerojo.jpg" class="">
    <img src="trajenegro1.jpg" class="">
  </div>
  <div class="images">
    <img src="polohombreverde.jpg" class="">
    <img src="hombrepolo1.png" class="">
  </div>
  <div class="joinus">
    Join us to have the latest updates!
    <br>
    User:
    <input type="text" name="" value="">
    <br>
    Password:
    <input type="text" name="" value="">
  </div>
</div>

Комментарии:

1. Не могли бы вы также добавить свой HTML, пожалуйста.

2. Готово! Если вам нужно изменить изображения, скажите мне: D

Ответ №1:

Вы хотите, как это?

 .imagesparent{
}
.images{
 display: flex;
 margin: 0 auto;
 position: relative;
 z-index: 1;
 justify-content: center;
 text-align: center;
}
.joinus{
  visibility:hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  height: 300px;
}
.joinus:hover{
  visibility: visible;
  background-color: blue;
}
.images:hover ~ .joinus{
  visibility: visible;
  background-color: blue;
}  
 <div class="imagesparent">
  <div class="images">
    <img src="image.jpg" class="">
    <img src="image.jpg" class="">
  </div>
  <div class="images">
    <img src="image.jpg" class="">
    <img src="image.jpg" class="">
  </div>
  <div class="joinus">
    Join us to have the latest updates!
    <br>
    User:
    <input type="text" name="" value="">
    <br>
    Password:
    <input type="text" name="" value="">
  </div>
</div>

Комментарии:

1. Когда я пытаюсь написать для пользователя или передать текстовые поля, это не позволяет мне этого делать. Вид щелчка и не могу щелкнуть по нему D:

2. Это позиционирование верно для вас?

3. И скажите мне, пожалуйста, что именно вы хотите?

4. Мне нужно убрать его, но да, и я хочу, чтобы при наведении курсора на изображения появлялся раздел «Присоединиться к нам»

5. Я отредактировал свой ответ сейчас, пожалуйста, проверьте его. Вы хотите, как это?