#html #css
#HTML #CSS
Вопрос:
У меня есть список встроенных изображений. Когда я наведу курсор на изображение, на нем появится фон с некоторой шириной и высотой.
Моя проблема в том, что, например, когда я навожу курсор на первый элемент, последний или последние 2 идут под первым, и я этого не хочу, я хочу оставаться в строке, и если для них нет пробелов в .content, они должны исчезнуть, чтобы позволить .item:наведите курсор, создайте его пробелы для отображения фона с его шириной/высотой.
Кроме того, при наведении курсора на последние 2 изображения возникают сбои..
Это мой код (проверьте полноэкранный режим)
* { color: yellow; } img { width: 270px; height: 300px; } .content { width: 100%; margin-left: 20px; margin-top: 20px; display: inline-flex; flex-wrap: wrap; } .item { display: inline-block; background-color: transparent; width: 250px; height: 350px; margin-right: 20px; transition: 1s ease-in-out; margin: 10px; } .item:hover { background-color: blue; width: 1000px; height: 350px; } .item:hover .item-description { width: 300px; height: 100%; display: inline-block; vertical-align: top; margin-left: 20px; position: relative; transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out; } .item:not(:hover) .item-description { visibility: hidden; height: 0; width: 0; opacity: 0; transition: unset; } lt;div class="content"gt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. встроенный блок не работает в контейнере flex
Ответ №1:
Я добавил flex-wrap: nowrap; вашу .content , и ни одна из карт не перейдет на следующую строку при наведении курсора. Пожалуйста, просмотрите фрагмент.
* { color: yellow; } img { width: 270px; height: 300px; } .content { width: 100%; margin-left: 20px; margin-top: 20px; display: inline-flex; flex-wrap: nowrap; } .item { display: inline-block; background-color: transparent; width: 250px; height: 350px; margin-right: 20px; transition: 1s ease-in-out; margin: 10px; } .item:hover { background-color: blue; width: 1000px; height: 350px; flex-shrink: 0; overflow: scroll; } .item;hover .item-description { width: 300px; height: 100%; display: inline-block; vertical-align: top; margin-left: 20px; position: relative; transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out; } .item:not(:hover) .item-description { visibility: hidden; height: 0; width: 0; opacity: 0; transition: unset; } lt;div class="content"gt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;/divgt; ПРАВКА: Добавлено flex-shrink: 0; item:hover , чтобы сохранить 1000px width также, я добавил overflow: scroll; в тот же класс, чтобы вы могли прокручивать по горизонтали, чтобы увидеть содержимое, которое переполняется.
Ответ №2:
* { color: yellow; } img { width: 270px; height: 300px; } .content { width: 100%; margin-left: 20px; margin-top: 20px; display:flex; flex-wrap:nowrap; overflow:auto } .item { display: inline-block; background-color: transparent; width: 250px; height: 350px; margin-right: 20px; transition: 1s ease-in-out; margin: 10px; } .item:hover { background-color: blue; width: 1000px; height: 350px; } .item:hover .item-description { width: 1000px; height: 100%; display: inline-block; vertical-align: top; margin-left: 20px; position: relative; transition: transform 1s ease-in-out, opacity 1s ease-in-out, visibility 1s ease-in-out, height 1s ease-in-out, width 1s ease-in-out; } .item:not(:hover) .item-description { visibility: hidden; height: 0; width: 0; opacity: 0; transition: unset; } lt;div class="content" gt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;div class="item"gt; lt;div class="item-img"gt; lt;img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt=""gt; lt;/divgt; lt;div class="item-description"gt; test lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Я пробовал и не получается.
2. я использовал этот код и его работу. вы хотите, чтобы изображения оставались встроенными и просто перемещались вправо при наведении курсора мыши на изображение правильно? это работает именно так. замените свой стиль .content на дисплей и гибкую обертку и добавьте переполнение. я отредактировал ответ
3. Вы должны скопировать фрагмент здесь и добавить свои изменения, чтобы продемонстрировать.
4. Да, но синий фон отображается не полностью (при 1000 пикселей). Я думаю, это растянуто.
5. я предоставил полный код. я также изменил .пункт:наведите курсор .пункт-ширина описания, чтобы достичь того, что вы хотите. пожалуйста, проверьте.