Создайте границу для элемента наложения как дочерний элемент родителя с динамической шириной и высотой

Question

Создайте границу для элемента наложения как дочерний элемент родителя с динамической шириной и высотой

0

Я хотел бы сделать границу над изображением при наведении курсора мыши, но выполнить ее исключительно с помощью CSS.

Моя структура очень проста:

<div class="outer">
    <div class="overlay"></div>
    <img />
</div>

Идея состоит в том, что .overlay получает границу 5 .overlay и становится видимой, когда мышь нависает над .outer

Изображение может иметь любую ширину/высоту - оно неизвестно и не может быть указано исключительно.

Единственная проблема заключается в том, что из-за законов с образцовой моделью я заканчиваю правую и нижнюю границу, которые отображаются за пределами .outer потому что 100% width/height на .overlay уже покрывают всю ширину outer.

Чтобы полностью понять, что я пытаюсь объяснить, обратитесь к моему jsFiddle.

Как я могу сделать .overlay быть как можно более широким и высоким, чтобы отображать рамку полностью над моим изображением? Я ищу решение, совместимое с кросс-браузером, поэтому изменение поведения модели box-model для проблематичного элемента, похоже, не является вариантом.

SquareCat 20 окт. 2013, в 03:10

Источник

Теги:

html

css

2 ответа

1

Вместо width:100%; и height:100%, установите right и bottom положения на 0px.

http://jsfiddle.net/hTECe/3/

Обратите внимание, что по умолчанию будет меньше поля ниже изображения. Это можно решить любым из этих решений:

Установите изображение для display:block. (См. Этот вопрос)
Установите vertical-align изображения в top, middle или bottom
Установите line-height линии внешнего кадра на 0

CSS

.outer img
{
   display:block;
}

.outer:hover .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px;
    border: 5px solid white;
    opacity: 0.75;
}

Andrew Shepherd 19 окт. 2013, в 22:15

0

Благодарю. Я сталкивался с этой вещью также, поскольку я использую те же самые процедуры для создания полного наложения страницы. Но я также не знаю, почему изображения создают нижнее поле или отступы по умолчанию? Откуда это?
SquareCat 20 окт. 2013, в 00:53
0

@Cummander Checkox - см. Мое редактирование и новый jsFiddle. Проблема заключалась в том, что внутри внешней рамки уже была невидимая прокладка.
Andrew Shepherd 20 окт. 2013, в 00:54
0

Да, но это не должно быть так, верно? Интересно, как можно вообще избавиться от этой прокладки?
SquareCat 20 окт. 2013, в 00:57
0

@Cummander Checkov - я разобрался, как избавиться от отступов. Смотрите обновленный ответ
Andrew Shepherd 21 окт. 2013, в 01:50

Показать ещё 2 комментария

Ещё вопросы

Благодарю. Я сталкивался с этой вещью также, поскольку я использую те же самые процедуры для создания полного наложения страницы. Но я также не знаю, почему изображения создают нижнее поле или отступы по умолчанию? Откуда это?
@Cummander Checkox - см. Мое редактирование и новый jsFiddle. Проблема заключалась в том, что внутри внешней рамки уже была невидимая прокладка.
Да, но это не должно быть так, верно? Интересно, как можно вообще избавиться от этой прокладки?
@Cummander Checkov - я разобрался, как избавиться от отступов. Смотрите обновленный ответ

Josh Crozier · Accepted Answer · 2013-10-19T23-04-00.000Z

В отличие от наложения divs, просто используйте псевдоэлемент :after. Он работает для динамического содержимого и требует только родительского элемента.

В принципе, просто установите родительский div для display:inline-block будет того же размера, что и дочерний. Затем установите :after содержимого width:100%/height:100% - таким образом, размер любого динамического изображения. HTML прост, так как для этого требуется только один родительский div, нет необходимости в дополнительном overlay классе.

jsFiddle здесь

HTML - чрезвычайно простой - нет избыточности.

<div>
    <img src="https://si0.twimg.com/profile_images/2704840564/ace6835dc7c12861b013a8f1ac3b1041.png">
</div>

CSS

div {
    display: inline-block;
    background: red;
    position: relative;
}

img {
    vertical-align: top;
}

div:hover:after {
    content: "\A";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid black;
    opacity: 0.75;
    background: red;
    z-index: 2;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Прекрасно! Работает как шарм, как кажется! Спасибо!
@CummanderCheckov Рад, что это помогло. Обновил скрипку, чтобы продемонстрировать, как она работает для всех размеров. jsfiddle.net/at36y
Мне это нравится, но я боюсь, что это может быть проблематично из-за размеров коробки. Это то, что я имел в виду, когда говорил, что не хочу изменять поведение блочной модели. Я имею в виду, как правило, я не совсем закрыт для использования этого решения, но .. я не знаю, это кажется "небезопасным". Что вы думаете об этом?
@CummanderCheckov Это абсолютно безопасно. Никаких недостатков. На самом деле, это самый распространенный способ достижения такой цели. Но если тебе это не нравится, это нормально.
@CummanderCheckov Вот поддержка размеров коробки. caniuse.com/css3-boxsizing .. Если это не поддерживается, это не является заметной проблемой в любом случае. Работает на всех основных браузерах.