CSS: Изменение размера Div в зависимости от исходного размера

У меня есть блоки времени, размер которых вычисляется программно.CSS: Изменение размера Div в зависимости от исходного размера

Цель состоит в том:

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

-Если содержимое меньше его контейнера, ничего не происходит.

Адрес fiddle.

Примечание:

-Red означает, что, как это в настоящее время.

-Green - моя цель.

Я использую Angular, поэтому решение javascript будет принято.

Fiddle HTML:

.current { 
 
    width: 200px; 
 
    background-color: red; 
 
    margin-right: 10px; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.current:hover { 
 
    height: auto !important; 
 
} 
 
.supposed { 
 
    width: 200px; 
 
    background-color: lightgreen; 
 
    margin-right: 10px; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
.supposed.small:hover { 
 
    height: auto !important; 
 
} 
 
.small { 
 
    height: 50px; 
 
} 
 
.big { 
 
    height: 100px; 
 
} 
 
.content { 
 
    height: 75px; 
 
    background-color: rgba(0,0,0,0.5); 
 
}

<body> 
 
    <div class="current small"> 
 
     <div class=" content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="current big"> 
 
     <div class="content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="supposed small"> 
 
     <div class="content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="supposed big"> 
 
     <div class="content"> 
 

 
     </div> 
 
    </div> 
 
</body>

источник

2016-10-21 HermanTheGermanHesse

В чем проблема, которую вы испытываете в скрипке, что должно быть иначе? – Alvaro

Перейдите ко второму красному div, а в нижней части передвиньте мышь вокруг, я бы хотел, чтобы это было по-настоящему, как зеленый большой квадрат. – HermanTheGermanHesse

CSS:

.content { 
    height: 100%; 
} 
.current:hover { 
    height: auto !important; 
} 
.content:hover { 
    min-height: inherit; 
}

HTML с Угловое:

<div class="current" ng-style="{height: calculateHeight()+'em',min-height: calculateHeight()+'em',}"> 
</div>

Установка высоты контента на 100% гарантирует, что парит над .current равно парит над .content.

Настройка "height: calculateHeight() + 'em'" дает желаемый эффект создания .current больше, если .content должен быть больше, чем ток.

Настройка «min-height: inherit» гарантирует, что .content всегда по крайней мере такой же большой, как и раньше.

@elveti: спасибо за вдохновение с максимальной высотой.

источник

2016-10-21 11:05:18 HermanTheGermanHesse

Используя только CSS, вместо установки высоты контейнера для автоматического при наведении DIV, вы можете установить переполнение видимым.

Таким образом, «скрытая» внутренняя поверхность будет видна при наведении курсора, пока контейнер останется тем же, если внутреннее пространство меньше.

.current:hover { 
    //height: auto !important; 
    overflow:visible; 
}

https://jsfiddle.net/kkw22eby/4/

источник

2016-10-21 09:33:09 Alvaro

Проблема в том, что в моем приложении это выглядело бы неплохо, так как там являются линиями в фоновом режиме, чтобы показать, когда это событие. А также это выглядит не очень хорошо: - / – HermanTheGermanHesse

Если думаете, что вы могли бы сделать это с помощью max-height вместо height на родителей и установки высоты на .content ребенка.

.small .content { 
    height: 75px; 
} 
.big .content { 
    height: 500px; 
} 
.small, 
.big { 
    transition: max-height 0.4s; /* Animates the max-height */ 
} 
.small { 
    max-height: 100px; 
} 
.big { 
    max-height: 150px; 
} 
.current:hover { 
    max-height: 3000px !important; /* Will be animated to height:auto and then it stops */ 
} 
.content { 
    background-color: #369; 
}

https://jsfiddle.net/c4jhvd8m/

источник

2016-10-21 09:59:23 elveti

CSS: Изменение размера Div в зависимости от исходного размера

ответ

Смежные вопросы