Hide Extra User Info with CSS Effect - Ẩn thông tin thêm người dùng với hiệu ứng CSS

[PVS]

Hide Extra User Info with CSS Effect - Ẩn thông tin thêm người dùng với hiệu ứng CSS

Đây là một ít đoạn mã CSS đơn giản mà giấu đi những thông tin thêm của tài khoản trong các tin nhắn cho đến khi ai đó làm một mouseover (di chuột) vào Message User Block.

Biết vấn đề:

Một khi người dùng di chuột qua Message User Block nó sẽ đẩy các nội dung dưới thông báo đó xuống. Bạn có thể giúp giảm này bằng cách thêm một chiều cao tối thiểu cao hơn vào nội dung tin nhắn.

Thêm vào EXTRA.css

.messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    html .messageUserBlock .extraUserInfo
    {
        opacity: 1;
        height: auto;
        transition: none;
    }
    .messageUserInfo:hover .extraUserInfo
    {
        height: auto;
    }
}
</xen:if>

​

Chúc các bạn thành công.

Nguồn: xenforo.com​