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 的边框更改为白色。我一直在尝试使用 box: hover 的变体，但它没有奏效。我还使用了 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 回答