javascript - 如何在翻转时更改边框颜色？-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 21:55:42

25

4

我正在编写一个包含文本框的网页。我想通过更改边框颜色在鼠标悬停在文本上时突出显示文本，但它一直不起作用。

这是我的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 的边框颜色更改为白色？

最佳答案

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

.box:hover{
    border-color: white
}

您必须注意顺序(以下示例将不起作用):

.box {
    border-color: black
}

.box:hover{
    border-color: white
}

Demo

关于javascript - 如何在翻转时更改边框颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13997207/

25

4

0

文章推荐： c# - 在类中轻松初始化字符串数组

文章推荐： node.js - 用于跟踪 Microsoft Word 更改/查看修订的 API

文章推荐： c# - Autocompletebox 不清除键盘笔画

文章推荐： c# - 如何使用 RANK() SQl 函数？

R:沿列的条件累积总和/翻转
我有一个数据集，我试图在其中探索将变量限制在给定值并将超出的部分滚动到后续间隔的影响。我可以从概念上看到一些方法可以使用 cumsum() 来做到这一点。或类似的，但正在努力了解如何以合乎逻辑的方式实
iPhone - 翻转 UIImage
我正在开发一个使用 iPhone 前置摄像头的应用程序。当使用该相机拍摄图像时，iPhone 会水平扭曲图像。我想将其镜像回来，以便能够保存它并按照在 iPhone 屏幕上看到的方式显示它。我读了很
jQuery DIV 翻转
这是 HTML // stuff here Order /
Javascript Div 翻转
我正在使用 Jquery - 是否有一种简单的方法可以在用户滑过 div 时更改它的背景颜色？最佳答案你可以用 CSS 做到这一点: #myDiv:hover { background-color
Javascript 翻转/镜像图像
有谁知道是否可以翻转图像并在其背面显示内容。这就是我的意思:想象一下你手里拿着一张肖像。然后你翻转并查看肖像的背面，背面有文字。我正在寻找类似的东西，单击图像将镜像/翻转到另一侧，上面有文字。不可90
CSS 翻转 - 悬停问题？
我在翻车方面遇到了一些麻烦..希望你能帮助我! 我正在使用 li 导航，我希望有单独的框链接到不同的页面。这部分很好，可以正常工作。我希望能够将鼠标悬停在框上并让框和链接改变颜色。我可以毫无问题地改变
javascript - 为什么图像文件输入会横向显示(翻转)？
所以我目前在 Vuejs 中有一个组件，用户可以在其中从他们的本地文件系统中选择一个文件。用户选择图片后，图片会在 div 中预览 codesandbox .出于某种原因，某些图像会自动“翻转”到侧面
CSS 翻转 - 背景图像不会居中
我有一个滚动顶部菜单。我正在尝试获取它，以便我的背景图像 (17px x 13px) 悬停在中央。我已经尝试了所有背景 css 属性，但似乎没有任何效果。我是不是用错了方法？这是我的 CSS: #n
CSS 翻转 Sprite
我以前用过这个效果，一切正常(据我所知)，但就是不行。我错过了什么？ Fiddle here Sprite here 谢谢。最佳答案由于您的 Sprite 是水平排列的，因此您需要像这样偏移悬停状
clojure - 翻转 "->"语句中的参数
代码后面的代码不起作用，因为重新查找接受字符串作为第一个参数，正则表达式作为第二个参数。 (-> "hello" .toUpperCase (re-find #".$")) 如果我像这
ios - 翻转 UILabel
我想使用 CABasicAnimation 翻转 UILabel。动画将永远重复，并将在两个不同值之间更改 UILabel 的文本。 - (void)animateLabel { [self
c# - 翻转/镜像图像
旋转 WPF 图像非常简单 imgCurrent.LayoutTransform = new RotateTransform(_rotationAngle); 水平和垂直镜像呢？机外: In GDI
Android 动画 - 翻转
我需要创建一个动画 - 翻转一个 View 并显示另一个。当前显示的 View 的宽度慢慢减小到零，之后要显示的 View 的宽度必须从零开始增加。在此期间，高度从当前显示的高度变为略微降低的高度
rust - 翻转 boolean 值的最快方法
我正在尝试找到翻转 Rust 中 boolean 值的最快方法？即 false => true true => false 对于我的应用程序，我不关心 boolean 值的当前值，只关心它被翻转了。对
jsf - 翻转 dataTable primefaces
是否可以翻转 primefaces 中的数据表，以使标题位于左侧而不是顶部？我有下表: 如您所见
iphone - 翻转 View 时出现问题
我在翻转 View 时遇到了一些问题。我的 View Controller 中有以下代码: - (void)loadFlipsideViewController { ProblemViewFl
iPhone - 翻转 View 显示白色背景
我正在使用翻转动画在 View Controller 中的两个 View 之间制作动画。问题是动画发生时背景显示白色空白背景。我想显示黑色背景。我尝试在 IB 和代码中将主视图的背景颜色设置为黑色。
iphone - 翻转 View iPhone
请考虑下面的代码，并告诉我我做错了什么。我想在两个 UIView 之间切换。不知何故，当我从初始 View 翻转时，我只是得到翻转的 View ，没有动画。当我向后翻转时，动画显示得很好。翻转是
ios - 翻转 NSScrollView 问题
我有一个 NSScrollView，需要在其中显示可变数量的 NSView。我制作了一个自定义 NSView，它的 isFlipped 返回 YES 并将我的 NSView 放入其中，然后将其设置为
macos - 翻转 NSView 鼠标坐标
我有一个 NSView 的子类，它重新实现了许多鼠标事件函数。例如，在 mouseDown 中从我使用的 NSEvent 获取点: NSEvent *theEvent; // <- argument

首页

博学

6Ren·AI

商城

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