:active 时的样式按钮与 :hover 不同

2024-04-02

我想制作一个按钮,在悬停时显示背景颜色,在按钮按下时显示没有背景颜色的按钮颜色。这是我当前的代码:

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
    fill:#1a82b8;
}

上面代码的问题是当它改变图标颜色时:active但不会删除设置的背景颜色:hover。如何去除背景颜色?


您必须设置新的背景颜色:hover state

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active {
   fill:#1a82b8;
   background-color:#000000;/*You can put the color you want*/
}

伪状态继承值。出于一致性目的,最好仅声明您在伪状态规则中更改的样式。

Note: :hover必须在之后:link and :visited(如果它们存在)在 CSS 定义中,以便有效!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

:active 时的样式按钮与 :hover 不同 的相关文章

  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显
  • 博客上的随机背景图片

    我正在尝试整理某种代码 以随机化我的博主博客上的背景图像 我的编程技能不足 但我愿意尝试建议 我记得在 WordPress 中实现了类似的功能 通过将 php 代码文件存储在图像文件夹中 然后从 CSS 中调用该 php 文件 就像它是图像
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • 如何使按钮在表格单元格内居中

    我试图通过以下方式将按钮置于表格内的中心 text align center 然而 它似乎对我不起作用 注 我用过Display table cell结合Vertical align middle将按钮的文本居中 正如您所看到的 第一个按钮
  • 菜单作为水平无序列表或表格?

    我有一个无序列表 水平显示为页面的顶部菜单栏 我已经让它显示得相对较好 尽管我一直在调整 IE6 和 IE7 的间距 因为它无法正常显示 令人震惊 无论哪种情况 使用表格来显示菜单还是使用一些CSS hack 我找不到解决方法 会更好吗 显
  • 水平滚动条仅出现在页面底部

    我有一个具有以下 HTML 结构的页面 div class wrapper div The wrapper被设置为min width 1100px至于原因我就不多说了 因此 当浏览器大小调整为小于 1100px 时 我希望出现水平滚动条 我
  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad
  • CSS Overflow 属性在 iPad 中不起作用

    我正在为 iPad 设计一些 html 页面 在尝试像 yscroll auto 这样的 css 溢出属性时 iPad 中没有出现滚动条 内容也没有滚动 我在 ipad 模拟器和设备中尝试过 有没有其他方法可以实现这个属性 请帮帮我 提前致
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • 角度 2 中的动态 styleUrls?

    是否可以将样式表的 url 动态注入到组件中 就像是 styleUrls stylesheet1 css this additionalUrls 或者 一厢情愿并注意这只是假代码 export class MyComponent imple
  • 如何在 Bootstrap 3 中指定行高?

    使用 Bootstrap 3 我将 row 类的高度设置为 3 5em 我在行中有几个输入 它们与行的顶部对齐 我想让它们底部对齐 我尝试过垂直对齐 底部的样式 但这似乎不起作用 我想让东西底部对齐的原因是我有一个浮动标签 我在输入字段上方
  • CSS - 第一个没有特定类别的孩子

    是否可以编写一个 CSS 规则来选择没有特定类的元素的第一个子元素 example div span class common class ignore span span class common class ignore span sp
  • 位置:绝对在边框半径内且溢出:隐藏

    我遇到了问题border radius在webkit浏览器中找到了解决方案 网址如下 如何在 Chrome Opera 中使 CSS3 圆角隐藏溢出 https stackoverflow com questions 5736503 how

随机推荐