Всплывающее описание для категорий

[TechSide]

TechSide добавил(а) новый ресурс:

Всплывающее описание для категорий - При наведении на категорию или ее содержимое, всплывает описание категории (проявляется)

Добавляем приведенный ниже код в extra.less

@media (min-width:650px){
.block--category
.block-desc{float:right;opacity:0;transition:all .5s ease-in-out}
.block--category:hover
.block-desc{opacity:1;color:#fff;float:right;padding-top:6px;transition:all .5s ease-in-out}}
@media (max-width:650px){
.block--category .block-desc{display:none}}

Данный код работает начиная от 650 px разрешения экрана. При необходимости уменьшаем порог или увеличиваем самостоятельно.

И получаем...

Узнать больше об этом ресурсе...

 

[CMTV]

Красиво, но лучше анимировать конкретно padding-top и opacity, потому что transition: all никогда ни к чему хорошему не приводит.
Могут начаться всякие ужасы, когда другие стили или скрипты попытаются поменять параметры категории. Лично на этом собаку съел.

 

[Skaiman]

@media (min-width:650px)

Как бы и не надо указывать

 

[ludcker]

Видимо для XF2.2 не работает

 

[Skaiman]

Видимо для XF2.2 не работает

так работает:

@media (min-width: @xf-responsiveMedium){
    .block--category {
        .block-header {
            .block-desc{
                float: right;
                padding-top: 6px;
                opacity: 0;
                transition: opacity .5s ease-in-out;
            }
            &:hover .block-desc{
                opacity: 1;
            }
        }
    }
}
@media (max-width: @xf-responsiveMedium){
    .block--category .block-desc{
        display: none
    }
}

 

[Skaiman]

или так:

@media (min-width: @xf-responsiveMedium){
    .block--category {
        .block-header {
            display: flex;
            align-items: baseline;
            .block-desc{
                opacity: 0;
                font-size: 0px;
                padding-left: 10px;
                transition: all .5s ease-in-out;
            }
        }
        &:hover .block-header .block-desc{
            opacity: 1;
            font-size: 12px;
        }       
    }
}
@media (max-width: @xf-responsiveMedium){
    .block--category .block-desc{
        display: none
    }
}