将鼠标悬停在文本输入字段上时，如何获得蓝光？

Question

我包括了底带3.3但是我在悬停时没有得到蓝色的光芒。只有在选择了字段时，才会出现蓝色突出显示的边框。如何将蓝光作为悬停效果？

  <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    <!-- CSS INCLUDES: -->
    <link href="/static/css/common_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <link href="/static/css/list_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <link href="/static/css/generic_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <link href="/static/css/ai_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">

我是否覆盖了效果，如果我将引导代码放在我自己的CSS下面会发生什么？那会有用吗？

Answer 1

如果您在浏览器中按F12，您可以看到CSS / HTML的编写方式，通过这种方式，您可以找到＆＃34;蓝光＆＃34;的CSS：

border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0px 0px 8px rgba(82, 168, 236, 0.6);

如果您有课程，则可以为特定州创建CSS：

.yourClass:focus{ background: #f00; }
#yourId:hover{ background: #00f; }

CSS将使用默认找到的最后一个css，但您也可以使用!important：

.example{ color: #0f0 !important; } /* Will be used first */
.example{ color: #f00; }
.example{ color: #00f; } /* Will be used if the first wouldn't have !important */

因此，如果您首先加载您的CSS，然后加载Bootstrap CSS，除非您使用！important，否则Bootstrap将替换您的CSS。

使用谷歌了解更多信息，搜索词：css状态，css输入，css box-shadow