0

だから私はテーブルを作成し、それに onmouseover 効果を追加しようとしたので、セルの背景色を変更できます。明らかに、(スタイルに) 背景の色が設定されていない場合、すべてが魅力的に機能します。しかし、そこにいるとき、私はそれを理解できません... 何か助けはありますか? これが私のコードです：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
 </head>
<script type="text/javascript">
    var link = true;
</script>
<body>
<style type="text/css">
    .tableX td
    {
        width: 33.33%;
        padding: 5px;
        font-family: 'Sans Serif',segoe UI light, Century Gothic;
        color: #FFFFFF;

    }
        .tableX td.largeLightBlue
        {
            height: 150px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            width: 33.33%;
            font-size: 18px;
            background: linear-gradient(#1ba3c7, #13738C);
            text-align: left;
            font-family: 'Segoe UI','Century Gothic', sans-serif;
            vertical-align: text-top;
            padding-left: 10px;
            cursor: pointer;
        }
        .tableX td.largeGreen
        {
            height: 150px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            width: 33.33%;
            font-size: 18px;
            background: linear-gradient(#35a44f, #297E3D);
            text-align: left;
            font-family: 'Segoe UI','Century Gothic', sans-serif;
            vertical-align: text-top;
            padding-left: 10px;
            cursor: pointer;
        }
        .tableX td.largeBlue
        {
            height: 150px;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            width: 33.33%;
            font-size: 18px;
            background: linear-gradient(#0C63CD, #07366F);
            text-align: left;
            font-family: 'Segoe UI','Century Gothic', sans-serif;
            vertical-align: text-top;
            padding-left: 10px;
            cursor: pointer;
        }

    .tableX
    {
        width: 740px;
        border-collapse: separate;
        border-spacing: 10px;
    }
</style>
<table class="tableX">
    <tr>
        <td onmouseover="style.backgroundColor='#E01B6A';" onmouseout="style.backgroundColor='#FAD957';" onclick="if (link) window.location ='http://www.yahoo.com'" class="largeLightBlue"  >
            <b>Some sample text</b><br />
            <ul>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet one</li>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet two</li>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet three</li>
            </ul>
        </td>
        <td onclick="if (link) window.location ='http://www.google.com'" class="largeGreen">
            <b>Second Sample text</b>
            <ul>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet one</li>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet two</li>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet three</li>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet four</li>
            </ul>
        </td>
        <td onclick="if (link) window.location ='http://www.bing.com'" class="largeBlue" >
            <b>Third Sample Box</b>
            <ul>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet one</li>
                <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet two</li>
            </ul>
        </td>
    </tr>

</table>

</body>
</html>
4

1 に答える 1

0

onmouseoverCSS で使用しているプロパティでbackground-colorはなく、 のみをターゲットにしています。問題を修正する代わりにbackground設定します。JSFiddle の例style.backgroundstyle.backgroundColor

于 2013-04-23T15:49:14.503 に答える