0

私はテキストの箱があるウェブページを書いています。境界線の色を変更して、マウスをロールオーバーしたときにテキストを強調表示したいのですが、機能していません。

これは私のHTMLコードです

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>main</title>
    <meta name="description" content="" />
    <meta name="author" content="Zolani" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <title>canvas</title>
    <meta name="description" content="" />
    <meta name="author" content="Zolani" />
    <link rel="stylesheet" type="text/css" href="canvas.css"/>
    <script type="application/javascript" src="canvas.js"></script>
</head>

<body>
    <div class="title">
        Linear Algebra.
    </div>
    <div>
        <div class="box" onmouseover="light()">
            <h1 class="boxtitle"> Matrix </h1>

            <p>
                Here are some matrixes. They're pretty cool, to
                be honest thing!
            </p>
        </div>
        <div class ="box" onmouseover="light()">
            <h1 class="boxtitle"> Subspaces </h1>

            <p>
                Example
            </p>
        </div>
    </div>

</body>

私のCSSコード

body { background: #AC00BF }

.title {
    position: absolute;
    left: 800px;
    top: 20px;
    color: black;
    font-size: 4.8em;
    font-family: sans-serif;
}

.box {
    color: white;
    font-family: sans-serif;
    font-size: 12px;
    background: black;
    border-style: solid;
    border-width: 4px;
    border-color: black;
    margin: 2cm 2cm 2cm 2cm;
    max-width: 300px;
    max-height: 200px;
}

.boxtitle {
    font-size: 18px;
    font-family: Georgia;
}

ロールオーバー時にdivの境界線を白に変更したい。ボックスのバリエーションを使用しようとしています：ホバーしましたが、機能しませんでした。タグを実装したa.box：hoverも使用しましたが、divはリンクのように表示されていました。

ホバー時にこのdivの境界線の色を白に変更するにはどうすればよいですか？

4

2 に答える 2

4

:hoveronを使用し.boxて私のために仕事をしました：

.box:hover{
    border-color: white
}

順序に注意する必要があります（次の例は機能しません）。

.box {
    border-color: black
}

.box:hover{
    border-color: white
}

デモ

于 2012-12-21T21:14:22.163 に答える
0

なぜ:hovercssセレクターを使わないのですか？

    div.box {
        ...
        border-color: black; (
    }

    div.box:hover {
        border-color: white;
    }
于 2012-12-21T21:14:36.400 に答える