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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,698
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
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>

userinfo.gif

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


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom