所有按钮上的发光效果，但只希望在 4答案

【问题标题】：glow effect on all buttons, but only want it on 4所有按钮上的发光效果，但只希望在 4
【发布时间】：2014-12-11 21:06:59
【问题描述】：

我正在制作一个网页（其中很多是相连的）

我在 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">

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

【问题讨论】：

为你想要发光的按钮添加一个类，例如glowbutton 并将 button:hover 替换为 .glowbutton:hover。
您想为需要发光的按钮添加一个类，并在 CSS 中设置 that 样式（例如.glowbutton:hover { ... }）。所示的 CSS 不适用于 input 元素，所以我对您的示例 HTML 有点困惑。
谢谢大家，您的建议解决了。谢谢你:)
这里是一个例子：jsfiddle

标签： html css button hover glow

【解决方案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。

【讨论】：

请考虑使用实际类 (.glow) 代替 .classname，这样答案对于 CSS 新手来说更容易理解。
您好，谢谢您的回答。我已经解决了我的问题。是的，我是初学者。我已经完成了 codeacademy 的 html 和 css 课程。事实是，我正在学习 IT 和软件开发，而我们的教授很疯狂，与我们的技能相比，给我们的项目太难了。他给我们使用 html、css、jquery 和 javascript 来解决疯狂的艰巨任务，即使我们中的任何一个人（80 名学生）都不会编写太多代码。他整个学期都在这样做，所以没有人学到任何东西。当我们甚至无法制作正常的网页时，他不能指望我们解决疯狂的事情哈哈。但是感谢您的帮助
@Rambo，如果您遇到困难，请 dw 来这里询问（就像您刚才所做的那样）在遇到一些麻烦后获得一些指导 - 只要您已经尝试过它。但是你为什么不能向他要求更多的指导（作为一个团体）？
您无法与该教授交流。如果你问他一些事情，任何事情，他都会生气并回答“你为什么不理解它？你没有做功课吗？你没有使用控制台进行故障排除吗？等等。没有意义，所以全班都去下周和他会面，我们希望情况会好转，他终于得到暗示。如果没有，我们必须去找我们大学的院长。但是谢谢，我需要帮助时会在这里问跨度>

【解决方案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;
}

【讨论】：