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

Tại sao khi hover vào mà bảng không hiện ra.

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi anhtuan1006, 6/7/16.

Lượt xem: 6,892

  1. anhtuan1006 Thành viên cấp 2

    Mọi người xem giúp mình đoạn Code dưới đây của mình, tại sao khi hover vào mục Chính Trị - Xã Hội

    mà bảng 2 (id ="tb2") lại không hiển thị ra được vậy:
    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css" media="all">
    
      a{
          text-decoration:none;
          color:#FF0}
      td:hover{
          background-color:#00F;
          }
      a:hover{
          color:#FFF}
    
      #tb2{
          display:none}
    
      td:hover #tb2{
          display:block}
    
    </style>
</head>

<body style="text-align:center;">
    <table id="tb1" border="1" cellspacing="0" style="color:#FFF; background-color:#F00; border-color:#FFF; font-weight:900">
     <tr height="50px">
       <td id="cot1" width="130px"><a href="#">Chính trị - Xã hội</a></td>   
       <td width="100px"><a href="#">Thế giới</a></td>
       <td width="100px"><a href="#">Nhịp sống trẻ</a></td>
       <td width="100px"><a href="#"> Giáo dục</a></td>
       <td width="100px"><a href="#">Kinh tế</a></td>
     </tr>
    </table>
  
    <table id="tb2" border="1" cellspacing="0">
        <tr height="50px"><td width="130px"><a href="#">An Ninh</a></td></tr>
        <tr height="50px"><td width="130px"><a href="#">Quốc Phòng</a></td></tr>
        <tr height="50px"><td width="130px"><a href="#">Địa Phương</a></td></tr>
        <tr height="50px"><td width="130px"><a href="#">Nhân Dân</a></td></tr>
    </table>
</body>
</html>
    Mình xin cảm ơn mọi người !

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    anhtuan1006, 6/7/16
    #1
  2. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Mọi người ơi, xin giúp đỡ mình với !
    anhtuan1006, 6/7/16
    #2
  3. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Các bạn ơi, có ai xem giúp mình với không....please ..hic (*_*)
    anhtuan1006, 6/7/16
    #3
  4. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Thay id bên dưới:
    Code:
    #tb2 {
display:none
}

td:hover #tb2 {
display:block
}
    Bằng:
    Code:
    #tb2 {
opacity:0
}

#tb2:hover {
opacity:1
}
    Tư Xả Láng, 6/7/16
    #4
    anhtuan1006 thích bài viết này
  5. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn Tư Xả Láng ơi, sao mình đã sửa như bạn nói rồi mà vẫn chưa được.

    Bạn kiểm tra lại giúp mình với. Cảm ơn bạn nhiều !
    anhtuan1006, 7/7/16
    #5
  6. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Hover bên dưới tab "Chính Trị - Xã Hội" đó, vì tab "Chính Trị - Xã Hội" không gán id tb2 được nên chỉ có tab bên dưới nó mới có thuộc tính hiện khi hover thui.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
a{
text-decoration:none; color:#FF0
}

a:hover{
color:#FFF
}
td {
text-align:center;
}
td:hover{
background-color:#00F;
}
#tb2{
opacity:0
}
#tb2:hover{
opacity:1
}
</style>
</head>
<body style="text-align:center;">
<table id="tb1" border="1" cellspacing="0" style="color:#FFF; background-color:#F00; border-color:#FFF; font-weight:900">
<tr height="50px">
<td id="cot1" width="130px"><a href="#">Chính trị - Xã hội</a></td>
<td width="100px"><a href="#">Thế giới</a></td>
<td width="100px"><a href="#">Nhịp sống trẻ</a></td>
<td width="100px"><a href="#"> Giáo dục</a></td>
<td width="100px"><a href="#">Kinh tế</a></td> </tr> </table>
<table  >
<tr height="50px">
  <td id="tb2" border="1" cellspacing="0" width="130px"><a href="#">An Ninh</a></td></tr>
  <tr height="50px">
  <td id="tb2" border="1" cellspacing="0" width="130px"><a href="#">Quốc Phòng</a>
  </td>
  </tr>
  <tr height="50px">
  <td id="tb2" border="1" cellspacing="0" width="130px"><a href="#">Địa Phương</a></td>
  </tr>
  <tr border="1" cellspacing="0" height="50px">
  <td id="tb2" width="130px"><a href="#">Nhân Dân</a></td>
  </tr>
  </table>
  </body>
  </html>
    Ít có ai viết suorce navigation menu bằng table như bạn, sao không dùng tag div kết hợp với tag ul li có phải dễ hơn không?
    Chỉnh sửa lần cuối: 7/7/16
    Tư Xả Láng, 7/7/16
    #6
    anhtuan1006 thích bài viết này
  7. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    hầy, mình muốn khi hover vào mục chính trị - xã hội thì menu con xổ xuống cơ chứ không phải như Code bạn gửi.

    Thực ra mình cũng làm được bằng cách sử dụng các thẻ Div, ul , li , rồi nhưng mình muốn thử thêm cách dùng table xem sao ấy mà.

    Vầy là không làm được yêu cầu như mình muốn bằng thẻ table hả bạn...?
    anhtuan1006, 7/7/16
    #7
  8. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Được, nhưng phải viết lại code hơi rắc rối tí. Chiều rảnh, mình nghiên cứu xem sao.
    Chỉnh sửa lần cuối: 7/7/16
    Tư Xả Láng, 7/7/16
    #8
    anhtuan1006 thích bài viết này
  9. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Ok, nếu được vậy thì hay quá.

    Rất rất cảm ơn bạn , lần nào bạn cũng giúp đỡ mình nhiệt tình hết thảy luôn ...
    anhtuan1006, 7/7/16
    #9
  10. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Xem demo:
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Demo navigation menu table</title>
<style>
body {
    background-image: url(https://i.imgur.com/1tBjwy1.jpg);
}
a{
text-decoration:none; color:#FF0
}
a:hover{
color:#FFF
}
.nav td {
    border: 2px solid #808080;
    background-color: blue;
    width: 156px;
    padding: 10px 0 10px 0;
    text-align: center;
}
.nav td:hover {
    background-color: red;
}
.nav td table {
    display: none;
    position: absolute;
    list-style: none;
    margin: 12px 0 0 -5px;
}
.nav td:hover table { display: table; /* hoặc dùng: display: block; */ }
</style>
</head>
<body>
<div style="width:810px;margin:40px auto 0;overflow: auto;">
<table class="nav">
    <tr>
        <td>
            <a href="#">Chính trị - Xã hội</a>
            <table>
                <tr>
                    <td><a href="#">An Ninh</a></td>
                </tr>
                <tr>
                    <td><a href="#">Quốc Phòng</a></td>
                </tr>
                <tr>
                    <td><a href="#">Địa Phương</a></td>
                </tr>
                <tr>
                    <td><a href="#">Nhân Dân</a></td>
                </tr>           
            </table>
        </td>
        <td><a href="#">Thế giới</a></td>
        <td><a href="#">Nhịp sống trẻ</a></td>
        <td><a href="#">Giáo dục</a></td>
        <td><a href="#">Kinh tế</a>
            <table>
                <tr>
                    <td><a href="#">Kinh tế-1</a></td>
                </tr>
                <tr>
                    <td><a href="#">Kinh tế-2</a></td>
                </tr>
                <tr>
                    <td><a href="#">Kinh tế-3</a></td>
                </tr>
                <tr>
                    <td><a href="#">Kinh tế-4</a></td>
                </tr>           
            </table>   
        </td>
    </tr>
</table>
</div>
</body>
</html>
    Mình làm thử 2 tab có dropdown sup tab: tab "Chính trị - Xã hội" và tab "Kinh tế" là có dropdown nha.
    Chỉnh sửa lần cuối: 7/7/16
    Tư Xả Láng, 7/7/16
    #10
    anhtuan1006 thích bài viết này
  11. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Yeah ... Tư Xả Láng bạn quả thật rất tuyệt ... thank you very much ...
    anhtuan1006, 7/7/16
    #11
    Tư Xả Láng thích bài viết này
  12. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Chào bạn Tư Xả Láng.

    Vấn đề nội dung Code thì quá Ok rồi nhưng mình còn một chút vấn đề nhỏ nữa về

    hình thức Code đó là: khi mình Copy đoạn Code bạn gửi ở trên diễn đàn dán vào cửa sổ soạn thảo

    Code của chương trình Dreamweaver thì các câu lệnh Code nó không tự ngắt dòng giống như trên

    diễn đàn mà nó cứ nằm liền tù tì thành một hàng luôn. Như thế trông rất khó coi và rất khó để đọc Code.

    Vậy mình muốn hỏi xem bạn có cách nào để khắc phục nó không. Cảm ơn bạn !
    anhtuan1006, 9/7/16
    #12
  13. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Cái đó là do mã nguồn DĐ nầy bị lỗi, ở các DĐ khác cũng xenforo nhưng người ta không bị lỗi nầy. Vì cái bất tiện đó nên mới đây mình có bài reply cho topic nầy: http://forum.vietdesigner.net/threads/hoi-ve-lien-ket-giua-2-div.114054/ mình toàn viết code ra ngoài, không dùng box code của DĐ quá bất tiện.
    Tư Xả Láng, 9/7/16
    #13
    anhtuan1006 thích bài viết này
  14. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn bạn, mình hiểu rồi
    Chúc bạn ngày nghỉ cuối tuần vui vẻ !
    anhtuan1006, 9/7/16
    #14
    Tư Xả Láng thích bài viết này

Ủng hộ diễn đàn