ホームページ >ウェブフロントエンド >jsチュートリアル >tdスタイルの無効なjqueryマウスダウン変更の問題を解決する
tdスタイルの無効なjqueryマウスダウン変更の問題を解決する
- 黄舟オリジナル
- 2017-06-28 09:36:091623ブラウズ
TDスタイルの無効なJQueryマウスダウン変更の問題の解決策
//样式
<style type="text/css">
#right td
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
font-size: 15px;
}
td.alt
{
background: #F5FAFA;
color: #797268;
}
img
{
max-width: 100px;
max-height: 100px;
}
th
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-weight: bold;
background: #4a98af;
}
tr.over td
{
background: #ecfbd4; /*这个将是鼠标高亮行的背景色*/
}
td.selected, tr.even td.selected, tr.odd td.selected
{
background: #bce774;
color: #555;
}
tr.click td, td.down
{
background: #bce774;
color: #fff;
}
#right a
{
text-decoration: none;
color: #057fac;
}
#right a:hover
{
text-decoration: none;
color: #999;
}
</style>
//脚本
<script type="text/javascript">
$(document).ready(function(){
$("#Clothes tr td").mousedown(function(){//鼠标按住时remove mouseenter时 td的样式。
$(this).removeClass("over");$(this).addClass("click");})
$("#Clothes tr td").mouseup(function(){//鼠标弹起时，清除td的样式
$(this).removeClass("click");})
$("#Clothes tr").mouseenter(function(){//鼠标进入tr添加样式.over
$(this).addClass("over");})
$("#Clothes tr").mouseout(function(){ //鼠标离开tr，清除样式.over
$(this).removeClass("over");})
$("#Clothes tr").click(function(){ //click tr时，添加样式.click
$(this).addClass("click");$(this).siblings().removeClass("click");})
});
</script>
<table id="Clothes">
<tr>
<td style="width: 10%">
<td style="width: 20%">
<td style="width: 10%">
</tr>
</table>ベストアンサー:
<style type="text/css">
#right td
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-size: 11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
font-size: 15px;
}
td.alt
{
background: #F5FAFA;
color: #797268;
}
img
{
max-width: 100px;
max-height: 100px;
}
th
{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
font-weight: bold;
background: #4a98af;
}
tr.over td
{
background: #ecfbd4; /*这个将是鼠标高亮行的背景色*/
}
td.selected, tr.even td.selected, tr.odd td.selected
{
background: #bce774;
color: #555;
}
tr.click td, td.down
{
background: #bce774;
color: #fff;
}
#right a
{
text-decoration: none;
color: #057fac;
}
#right a:hover
{
text-decoration: none;
color: #999;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#right tr td").mousedown(function () {//鼠标按住时remove mouseenter时 td的样式。
$(this).removeClass("over"); $(this).addClass("click");
})
$("#right tr td").mouseup(function () {//鼠标弹起时，清除td的样式
$(this).removeClass("click");
})
$("#right tr").mouseenter(function () {//鼠标进入tr添加样式.over
$(this).addClass("over");
})
$("#right tr").mouseout(function () { //鼠标离开tr，清除样式.over
$(this).removeClass("over");
})
$("#right tr").click(function () { //click tr时，添加样式.click
$(this).addClass("click"); $(this).siblings().removeClass("click");
})
});
</script>
<body>
<table id="right">
<tr>
<td style="width: 10%">哈哈
</td>
<td style="width: 20%">嘿嘿
</td>
<td style="width: 10%">呵呵
</td>
</tr>
</table>
</body>元々あなたが書いたことは正しいですが、テーブルにデータがないため、ページがロードされたばかりのときは何も表示されません。また、全体のスタイルは右に基づいていますが、テーブルに服を書きますので、よく見て変更してください
以上がtdスタイルの無効なjqueryマウスダウン変更の問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。