Đâ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

Mã:
.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: VNXF.VN