3

私はここで初めてです、そしてこれはこの分野での私の最初の質問です。

HTML、CSSを使用してテーブルを作成しました。これは表です：http：//abidhasan.zxq.net/table/table-others.html

マウスを1列に置いたままにすると、その列でホバー効果が発生します。アイコン/価格にマウスを置いたとしても、価格のテキストと最初の列のテキストは太字になり、どの行のどの列にあるかが簡単にわかります。実際にマウスを置いたのは次のとおりです。https://www.dropbox.com/s/q8acafxu3yhefj0/table.png

すべて順調。しかし、私は1つの問題に直面しました。

（1）2行目にマウスを置くと、最後の列もホバー効果が得られます。しかし、私はそれを望んでいません。2行目にマウスを置いたままにすると、最後の列がホバーされません。

（2）最後の列にマウスを置くと、ホバー効果が得られます。ただし、同時に、2行目もホバー効果があります。私もこれは欲しくない。最後の列にマウスを置いたままにすると、最後の列だけがホバー効果を取得し、他の行/列はそのホバー効果を取得しないようにしたいのですが、どうすればよいですか？

私のテーブルの構造：

<table class = "table-4">
  <tr>
      <th>Tapered Triangle</th>
      <th>Diameter 8'</th>
      <th>Diameter 10'</th>
      <th>Diameter 12'</th>
      <th>Diameter 14'</th>
      <th>Diameter 15'</th>
      <th>Diameter 16'</th>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>      
      <td></td>
      <td></td>
      <td rowspan = "5"></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

主に、2行目で問題が発生しています。

<tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>      
   <td></td>
   <td></td>
   <td rowspan = "5"></td>
</tr>

2行目の最後の列

<td rowspan = "5"></td>

可能であれば、CSSで解決策を提供してみてください。CSSでそれが不可能で、Javascript / jQueryで解決策を提供する場合、私はJavascript / jQueryの専門家ではないので、詳細を教えてください。CSS3で解決策を提供する場合は、それがクロスブラウザ互換性の要求をどのように満たすかについても教えてください。私はここで本当に新しいです。だから、私の間違いを許してください。私の質問を見てくれたみんなに感謝します。

4

3 に答える 3

1

このcssをstyle.css52行目の近くで削除します

.table-4 tr:hover td {
    background: none repeat scroll 0 0 #D0DAFD;
    color: #000099;
}

あなたが使用した:hover

:hover=>元々Microsoftによって発明された、a：hover疑似クラスはすぐにヒットしました。これにより、マウスがカーソルを合わせる要素のスタイルを定義できます。

注：タッチスクリーンの場合：ホバーは問題があるか不可能です

良い読み物

  1. MDN：:hover

コメント後に編集する

あなたが望む効果は少しjquery（javascript）を試すことによって達成することができます

.table-2 and 3 and 4 tr:hover tdcssを削除します

少しjqueryを追加します

var color = '';
$('td').hover(function(){

    $(this).css('background','none repeat scroll 0 0 #D0DAFD');
     $(this).css('color','#000099');
     $(this).parent().find('td:first').css('background','none repeat scroll 0 0 #D0DAFD');
     $(this).parent().find('td:first').css('color','#000099');


},function(){
    $(this).css('background',color);
     $(this).css('color','#666699');
     $(this).parent().find('td:first').css('background',color);
     $(this).parent().find('td:first').css('color','#666699');
})

jsFiddle

于 2012-12-12T04:39:54.497 に答える
1

私はcssとjqueryで次のようにいくつかの小さなトリックを行いました。

CSSパート：

<style type="text/css">
.new-child {
background:none !important;
}
.born-child {
background:#d0dafd !important;
}
</style>

jQueryパート：

<script type="text/javascript">
$(document).ready(function() {

$(".table-4 tr:eq(1)").hover(function(){
$(".table-4 tr:eq(1)").find('td[rowspan]').addClass("new-child");
});

$(".table-4 tr:eq(1) td[rowspan]").hover(function(){ 
$(".table-4 tr:eq(1) td").addClass("new-child");  
$(".table-4 tr:eq(1) td[rowspan]").removeClass("new-child");
$(".table-4 tr:eq(1) td[rowspan]").addClass("born-child");
},
function () {
$(".table-4 tr:eq(1) td").removeClass("new-child");
$(".table-4 tr:eq(1) td[rowspan]").removeClass("born-child");
}
);

});
</script>

実際の動作を確認するには：http：//jsfiddle.net/john_rock/emtpb/

これはあなたの問題を解決するのに役立つかもしれないと思います。

于 2012-12-12T07:47:37.673 に答える
0

簡単な答えです。各行に指示があります。簡単な答えで申し訳ありませんが、rowspanはあなたに多くのgreifを引き起こします。

于 2012-12-12T04:46:21.933 に答える