Question

我正在写一个包含文本框的网页。我想通过改变边框颜色来突出显示鼠标滑过它们时的文本，但它没有工作。

这是我的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：悬停并实现了标记，但div显示为链接。

如何在悬停时将此div的边框颜色更改为白色？

Answer 1

在:hover上使用.box为我完成了工作：

.box:hover{
    border-color: white
}

您需要注意订单（以下示例不起作用）：

.box {
    border-color: black
}

.box:hover{
    border-color: white
}

Demo

Answer 2

为什么不使用:hover css选择器？

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

    div.box:hover {
        border-color: white;
    }

如何在翻转时更改边框颜色？

2 个答案: