Как отобразить div при наведении курсора на изображение с помощью CSS / HTML + Transitions? - PullRequest
Новая
       18

Как отобразить div при наведении курсора на изображение с помощью CSS / HTML + Transitions?

0 голосов
/ 17 марта 2020

Я пытаюсь достичь двух вещей, которые я не могу понять:
1) Как отобразить div, когда я наводю курсор на изображение, в идеале с эффектом перехода.
2) Как сделать div остается, когда пользователь перемещает мышь от изображения к самому div.

Вот мой код; у него нет эффекта перехода, и если div не находится непосредственно рядом с изображением, он не будет работать, когда я наведу на него курсор. 

<style>
#Picture {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 375px;
height: 375px;
}

#content {
display: none;
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 300px;
background-color: #7377a8;
}

#Picture:hover + #content {display: block;}

#content:hover {display:block;}
</style>
<body>
<img src="" alt="Picture" id="Picture" />
<div id="Content">
Something goes here
</div>
</body>

PS Прошу прощения, если что-то отформатировал неправильно; Я новичок на сайте.

Ответы [ 3 ]

0 голосов
/ 17 марта 2020

Эффект hover не является мобильным (хотя появляется все больше и больше «чувствительных к зависанию» устройств). Чтобы приспособить большинство устройств, я часто использую :hover и :focus для «выпадающих» вещей. Однако для этого нужны «фокусируемые» элементы, для которых я обычно использую тег <a> nchor.

Но сначала: смысл в вашем коде - это согласованность, поскольку вы сочетаете строчные и прописные буквы в #content и id="Content". Вот почему это не работает в любом случае.

Отвечая на ваши вопросы:

1) сделайте верхний / нижний регистр непротиворечивым!

2) Чтобы создать наведение с постоянством, активируйте отображение «контента» с фокусируемым » триггерный элемент

При наведении / щелчке внешний <a> остается сфокусированным и, следовательно, его родной элемент #content виден. При наведении курсора .shorttext будет отображаться его брат .longtext.

При нажатии .shorttext (фактически в любом месте #content) окно содержимого снова закроется, поскольку внешний <a> снова потеряет фокус.

FYI-1, атрибут display не анимируемый, поэтому вам понадобится альтернатива, когда вам понадобится переход к какому-либо элементу. В этом случае используется opacity от 0 до 1 (необязательно в сочетании с width и height, от 0 до 300 пикселей).

FYI-2, используя href="javascript:void(0)" вместо href="#" запретит браузерам добавлять записи в свой журнал истории при каждом клике.

FYI-3 final, по умолчанию используются классы CSS, это обобщенно c, что значительно упрощает копирование того же поведения в ваш HTML, без повторения CSS каждый раз. Идентификаторы указаны c и требуют, чтобы вы копировали равные CSS снова и снова. 

a {
  color: currentColor;
  text-decoration: none
}

.picture {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 375px;
  height: 375px;
}

.content {
  /*  display: none;  remove */
  opacity: 0; /* add */
  transition: all 150ms ease-in-out; /* add */
  position: fixed;
  left: -800px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 0; /* [OPTIONAL] modify from 300px */
  height: 0; /* ditto */
  background-color: #7377a8;
}

.trigger:hover+.content,
.trigger:focus+.content {
  /* add, for persistent display of content. click elsewhere to close again */
  /*  display: block; remove */
  opacity: 1; /* add */
  width: 300px; /* [OPTIONAL] add, see above */
  height: 300px;
}

.shorttext { /* eye-candy only */
  width: 100%;
  text-align: center
}

.longtext {
  display: none
}

.shorttext:hover+.longtext {
  display: block;
}

/* little debug helper */

[outlines="1"] * {
  outline: 1px dashed purple
}
<body outlines="0">
<a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a>
<div class="content">
    <h3 class="shorttext">short intro text, hover me</h3>

    <p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
</div>
</body>
0 голосов
/ 17 марта 2020

простой трюк - поместить изображение и содержимое внутри div .

HTML

<div class="container">
  <img src="img.jpg" alt="image" class="container__img">
  <p class="container__content">
    Something goes here
  </p>
</div>

CSS

.container {
  width: 300px;
  height: auto;
  overflow: hidden;
}
.container__img {
  width: 100%;
  object-fit: cover;
}
.container_content {
  transform: translateX(-100%);
  transition: transform .5s;
}
.container:hover > .container__content {
  transform: translateX(0);
}

изменить отобразить свойство для содержимого , если вы не хотите, чтобы место было занято до его отображения.
спросите, если что-то неясно.

0 голосов
/ 17 марта 2020

Ваш код на самом деле довольно работает. Ваша проблема в том, что picture и div не находятся рядом друг с другом. Просто переместите их рядом, и все будет хорошо.

Идентификатор вашего div был Контент , а в CSS это было Контент . В некоторых браузерах идентификаторы чувствительны к регистру, поэтому это может быть еще одна проблема.

Я использовал непрозрачность вместо отображения, чтобы сделать переход работающим.

Вот мой код: 

#picture {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 200px;
}

#content {
    opacity: 0;
    position: fixed;
    left: 200px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-color: #7377a8;
    transition: opacity .5s;
}

#picture:hover + #content {
    opacity: 1;
}

#content:hover {
    opacity: 1;
}
<img src="" alt="Picture" id="picture" />
<div id="content">
    Something goes here
</div>
...