Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Mọi người giúp em hiệu ứng hover hiện thông tin sản phẩm bằng css !

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi agasi113a, 25/5/14.

Lượt xem: 5,868

  1. agasi113a Mới đăng kí

    -Em đang làm bài tập web asp + sql ! hiện tại en có 1 datalist đã được đổ hết dữ liệu từ table sanpham ! edit template bên trong datalist chỉ có hình và 1 label hiển thị tên sản phẩm !
    -Ý tưởng : Khi Loadpage em đã lấy hết dữ liệu từ table sản phẩm, em chỉ hiển thị hình và tên sản phẩm các thông tin còn lại em dùng thuộc tính opacity=0 để ẩn đi.Đến đây khi hover vào hình ảnh sẽ hiện những thông tin còn lại.
    Mọi người giúp em thiết kế cái div để chứa những thông tin này với ! em không rành về css lắm.
    Thanks mọi người ! :))

    [ 6porEh7.jpg


    -Đoạn mã của datalist :
    <asp:DataList ID="DataList3" runat="server" RepeatColumns="3">
    <ItemTemplate>
    <table class="auto-style1">
    <tr>
    <td>
    <asp:Image ID="Image1" runat="server" style="" ImageUrl='<%# eval("hinhanh") %>' Height="150px" Width="150px " />
    </td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>
    <asp:Label ID="Label1" runat="server" Text='<%# eval("tensp") %>'></asp:Label>
    </td>


    <td>&nbsp;</td>
    </tr>
    </table>
    </ItemTemplate>
    </asp:DataList>

    ...
  2. MidsideElite

    MidsideElite Thành viên cấp 2

    có css kiểu thế nữa à:)) tham khảo jQuery nhé
  3. banbaonylong

    banbaonylong Ko phải assmin

    xài css hover đc chứ js làm gì? Sắp xếp lại code nhé

    mô tả nhé:
    1. mỗi sản phẩm trong 1 thẻ <td>.
    2. cho 1 thẻ <a> bên trong <td>, css là float left, display block, width và height 100%, position relative.
    3. trong thẻ <a>, cho cái thẻ ảnh <img>, bạn cho width height cụ thể, nếu canh giữa thì margin auto, position absolute, top 0,
    4. dưới thẻ <img> cho 1 thẻ <span> chứa nội dung sản phầm. css sẽ là position absolute, bottom 0, width 100%, height tuỳ bạn, background tuỳ bạn, display: none;.
    5. thêm 1 css a:hover span {display: block;}
    caphenhiepanh thích bài viết này
  4. agasi113a

    agasi113a Mới đăng kí

    dạ thanks anh ! để em thử xem sao !

Ủng hộ diễn đàn