Question

我的css悬停不起作用。代码来自wordpress主题，我认为它使用的是bootstrap，但我不确定，因为我对编码很新。

html是（在Google Chrome中使用'inspect'）：

<div class="panel panel-default panel-even">
  <div class="panel-heading">
    <a class="accordion-toggle  collapsed" data-toggle="collapse" data-parent="#accordionname651" href="#collapse6510">
      <h5>
        <i class="icon-minus kt-icon-minus primary-color"></i>
        <i class="icon-plus kt-icon-plus"></i>
          Ear Wax Removal
      </h5>
    </a>
  </div>

等...

以上代码是“手风琴”菜单的一部分，因此当点击每个“面板”时，该面板中的内容会下拉

我想要做的是，当用户在面板上悬停时，背景颜色会发生变化，但文本的颜色也会从黑色变为白色。

目前的css是：

.panel-heading{
  background: #d5d5d5;
  text-align: center;
}
.panel-heading:hover {
  color: #fdfdfd;
  background: #c9c9c9;
}

但是虽然这会改变面板标题背景的颜色，但它对标题上的文字颜色没有任何作用。

我怀疑答案会很简单，但我无法理解为什么它不起作用

提前感谢任何回答

的人

Answer 1

试试这个，

＆＃13;

.panel-heading{
  background: #d5d5d5;
  text-align: center;
}
.panel-heading:hover {
  color: #fdfdfd;
  background: #c9c9c9;
}
.panel-heading a:hover {
  color: #fdfdfd;
}

＆＃13;

<div class="panel panel-default panel-even">
  <div class="panel-heading">
    <a class="accordion-toggle  collapsed" data-toggle="collapse" data-parent="#accordionname651" href="#collapse6510">
      <h5>
        <i class="icon-minus kt-icon-minus primary-color"></i>
        <i class="icon-plus kt-icon-plus"></i>
          Ear Wax Removal
      </h5>
    </a>
  </div>

＆＃13;

Answer 2

您是否尝试使用!important;。

.panel-heading{
  background: #d5d5d5 !important;
  text-align: center !important;
}
.panel-heading:hover {
  color: #fdfdfd !important;
  background: #c9c9c9 !important;
}

CSS悬停不会改变文本的颜色

2 个答案: