私が取り組んでいるプロジェクトには、IE7 ブラウザーでのみ使用される一種のメニューがあります。HTML:
<table class="tabellaquad" cellspacing="20">
<tr>
<td>
<a class="item" href="index.jsp?quad=1">
<div align="center" class="tabquad">
ONE
</div>
</a>
</td>
<td>
<a class="item" href="index.jsp?quad=7">
<div align="center" class="tabquad">
1
</div>
</a>
</td>
<td>
<a class="item" href="index.jsp?quad=4">
<div align="center" class="tabquad">
RED
</div>
</a>
</td>
</tr>
<tr>
<td>
<a class="item" href="index.jsp?quad=2">
<div align="center" class="tabquad">
TWO
</div>
</a>
</td>
<td>
<a class="item" href="index.jsp?quad=8">
<div align="center" class="tabquad">
2
</div>
</a>
</td>
<td>
<a class="item" href="index.jsp?quad=5">
<div align="center" class="tabquad">
BLUE
</div>
</a>
</td>
</tr>
<tr>
<td>
<a class="item" href="index.jsp?quad=3">
<div align="center" class="tabquad">
THREE
</div>
</a>
</td>
<td>
<a class="item" href="index.jsp?quad=9">
<div align="center" class="tabquad">
3
</div>
</a>
</td>
<td>
<a class="item" href="index.jsp?quad=6">
<div align="center" class="tabquad">
YELLOW
</div>
</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<a class="item" href="index.jsp?quad=10">
<div align="center" class="tabquad">
4
</div>
</a>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<a class="item" href="index.jsp?quad=11">
<div align="center" class="tabquad">
5
</div>
</a>
</td>
<td>
</td>
</tr>
</table>
CSS:
.tabellaquad{
margin:auto;
position:relative;
width:40%;
text-align:center;
}
.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
私がやりたいことは<div>
、各列に 3 つの「父」ボタン (a) を用意することです。それらの 1 つをクリックすると、その下にボタンがゆっくりと表示される必要があります (列によって異なります)。
これを行うために使用できる CSS/JS スクリプトはありますか? 私の主な問題は、IE7 を使用する必要があることです。
ここでは、 jsfiddle の例をいくつか見つけることができます。