Question

我想在鼠标悬停App1，app2和app3标签上显示子应用程序列表。子应用程序列表应该一个在另一个下面显示。以下是我的示例代码，请帮助我。

这是我的JSFiddle Jsfiddle

<table id="fooBar" border="0">
        <tr>
        <th>App1</th>
  <th>App2</th>
  <th>App3</th><th>
  </tr>
        <tr class="">
        <td>Text</td>
        <td></td>
        <td> </td>
        <td> </td>

        </tr>
        <tr class="alt">
        <td>Text</td>
        <td></td>
        <td></td>
        <td></td>

        </tr>
        <tr class="">
        <td>Text</td>
        <td></td>
        <td> </td>
        <td> </td>

        </tr>
        <tr class="alt">
        <td>Text</td>
        <td></td>
        <td></td>
        <td></td>

        </tr>
        </table>

这是我的CSS：

table{
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
 border:1px solid #999999;
  }

 th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
    sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
 }

 tr {
background: #fff;
color: #261F1D;
  }

 tr:hover, tr.alt:hover {
color: #261F1D;
 background-color: #E5C37E;
 }

 .highlighted {
color: #261F1D;
background-color: #E5C37E;
  }

  tr.alt {
background: #F5FAFA;
color: #B4AA9D;

Answer 1

试试这个jQuery

$( "tr th:nth-child(n)" ).hover(function() {
    var index = $(this).index() + 1;
    $( this ).css( "background","#ff0000" );
    $( this ).parent().parent().find("tr td:nth-child("+index+")").css("background","#ff0000");

 });
 $( "tr th:nth-child(n)" ).mouseleave(function() {
   $( this ).css( "background","" );
   $( this ).parent().parent().find("tr td:nth-child(n)").css("background","")
 });

Answer 2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
    vertical-align:top;
    margin-bottom:15px;
    border:1px solid #999999;
}

th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
        sans-serif;
    color: #F2EDEB;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #522D25 url(images/bg_header.jpg) no-repeat;
}

tr {
    background: #fff;
    color: #261F1D;
}

tr:hover, tr.alt:hover {
    color: #261F1D;
    background-color: #E5C37E;
}

.highlighted {
    color: #261F1D;
    background-color: #E5C37E;
}

tr.alt {
    background: #F5FAFA;
    color: #B4AA9D;
}

td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    padding: 6px 6px 6px 12px;
}
   </style>
<script>
    $(document).ready(function () {
        $('th').hover(
  function () {
      $(this).html("<select><option>" + $(this).text() + "</option></select>")
  }, function () {
      $(this).html($(this).text())
  }
);


    });
</script>
</head>
<body>
            <table id="fooBar" border="0">
            <tr>
            <th>App1</th>
      <th>App2</th>
      <th>App3</th><th>
      </tr>
            <tr class="">
            <td>Text</td>
            <td></td>
            <td> </td>
            <td> </td>

            </tr>
            <tr class="alt">
            <td>Text</td>
            <td></td>
            <td></td>
            <td></td>

            </tr>
            <tr class="">
            <td>Text</td>
            <td></td>
            <td> </td>
            <td> </td>

            </tr>
            <tr class="alt">
            <td>Text</td>
            <td></td>
            <td></td>
            <td></td>

            </tr>
            </table>
</body>
</html>

在鼠标悬停时，显示文本，如标记的下拉列表

2 个答案: