Question

我制作了一个网页（很多连接的网页）

我已将glow函数/属性添加到CSS中的按钮。事情是我已经使用过这个;

button:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

问题是，我的CSS文件被链接并被5个不同的HTML文件使用，而且还有更多。因此，不仅仅在我在一个HTML页面上的4-5个按钮上获得发光效果，而且焕发功能现在位于所有其他HTML页面上的所有按钮上。

如何避免这种情况，我无法在＃id中添加发光功能？

我的按钮在css中就像这样

#TrafficJam1 {
    position: absolute;
    top: 1120px;
    left: 20px; 
    height:107px;
    width: 278px;
}

那只是其中之一

这是特定的HTML部分，

<input type="image" src="TrafficJam.jpg" id="TrafficJam1">

我必须使用此代码，因为我的按钮是图像。

Answer 1

将您要应用此CSS的按钮提供给class，如下所示：

<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">

类是html元素的另一个标识符。但它与id的不同之处在于你可以使用它们一次定位多个元素。所以你可以把你希望这个效果的按钮放在同一个类上，然后像你这样在CSS中定位那个类：

.glow:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

然后有点偏离主题。你要问的是非常基本的东西。所以我知道你是HTML和CSS的初学者，对吧？如果你是的话，用codecademy.com这样的在线学习工具学习更多的HTML和CSS是明智的。

Answer 2

创建一个新的样式表并将其链接到您希望按钮发光的页面中。这可以通过使用<link>标签轻松完成，但我想您对此很熟悉。在该文件中，您只需添加您正在使用的代码：

.classname:hover {
    border: 80px solid #ffffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 4px #ffffff;
    -moz-box-shadow: 0px 0px 4px #ffffff;
    box-shadow: 0px 0px 4px #ffffff;
}

所有按钮上的发光效果，但只需要4

2 个答案: