CSS - 在悬停状态下更改 div 的背景颜色

标签 css

如果您转到此页面:http://www.inventivewebdesign.com/renohifi/listings_portfolio/pass-labs-xa-160-8-monoblock-power-amps/

并查看相关产品下方的底部,您将看到图像和产品标题列表。当您将鼠标悬停在其中一个上时,图像会变灰,并且图像下方的产品标题周围会出现一个白框。我需要让这个白框消失,但我无法在 CSS 中找到导致它的原因。

我尝试了以下 CSS:

.car-block a:hover >.car-block-bottom h2 {
     background: rgb(0, 0, 92) none repeat scroll 0 0 !important;
}
.car-block, .car-block:hover, .car-block:hover .car-block-bottom {
    background-color:  rgb(0, 0, 92) !important;
}

.car-block .car-block-bottom h2 {
    font-weight: bold;
    font-size: 16px;
    margin: 0px;
    margin-top: 10px;
    padding: 2px;
    color: #fff;
    background-color:  rgb(0, 0, 92) !important;
}

.car-block-bottom {
    display: block;
    padding: 6px 5px 10px;
    text-align: center;
    transition-duration: 0.2s;
    transition-property: all;
    background-color:  rgb(0, 0, 92) !important;
}

如有任何帮助,我们将不胜感激。

最佳答案

尝试覆盖 .car-block-bottom 的白色背景

.car-block, .car-block:hover, .car-block:hover .car-block-bottom.car-block-bottom {
    background-color:  rgb(0, 0, 92) !important;
}

关于CSS - 在悬停状态下更改 div 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40600604/

相关文章:

javascript - 更改负数的字体 css

jquery - 带有动态宽度表的固定表头?

html - 是否可以在一行中调用样式表上外部 div 中的内部 div?

html - CSS - 优化同一元素的恒定屏幕尺寸变化以提高性能

html - 尝试让我的 <ul> 使用 Flexbox 填充我的容器底部

jquery - 使用 jquery "keydown"移动 "box"

html - 由于绝对位置和 0 高度,我的 div 隐藏在其他 div 之下

javascript - 表格内容溢出页面

html - 强制跨度像列表指示器一样工作

javascript - css 下拉菜单和 javascript