[VNXF] - 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ã:
[/FONT][/COLOR][COLOR=#032A46][FONT=Consolas].messageUserBlock .extraUserInfo[/FONT][/COLOR]
{
    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;
    }
} [COLOR=#032A46][FONT=Consolas]</xen:if>[/FONT][/COLOR][COLOR=#032A46][FONT=Times New Roman]



userinfo-gif.9240.html

Chúc các bạn thành công.
Nguồn: VNXF.VN
 
  • Chủ đề
    hiệu ứng css vnxf vnxf.vn
  • Bài viết đang hot

    Thống kê

    Chủ đề
    102,777
    Bài viết
    470,596
    Thành viên
    340,592
    Thành viên mới nhất
    NDHU
    Top