将鼠标悬停在其父元素上时更改插入符号按钮

Question

我有一个手风琴，当鼠标悬停在锚标记上时，我想更改手风琴内的图标

<div class="accordion-group panel">
    <div class="accordion-heading">
         <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse292"> 
            <i></i> Course Curriculum 
         </a>
    </div>
    <div id="collapse292" class="accordion-body collapse in" style="height: auto;">
        <div class="accordion-inner"></div>
    </div>
</div>

我的 css 代码中有以下内容，我正在使用 fontawesome 使用 content css 属性显示插入符号，但我无法弄清楚如何将图标定位为另一个插入符号并在悬停时更改其背景颜色在锚标记元素上。

.accordion-heading a {
    font-size: 14px;
    text-transform: capitalize;
    padding: 14px 20px 10px 0;
    font-weight: 600;
    width: 100%;
    font-family: Arial, sans-serif;
    display: block;
    border-bottom: 1px solid #EFEFEF;
    position: relative;
    background-color: #cbcbcb;
    padding-left: 12px;
    color: #333333;
    text-shadow: 0px 1px 0px rgba(255,255,255, .35);
}

.accordion-heading a.accordion-toggle:after {
    background: #949494;
}

.accordion-heading a:hover{
    background: #65b72f;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);
};

.accordion-heading a.accordion-toggle:after {
    font-family: FontAwesome;
    float: right;
    font-size: 22px;
    color: #EFEFEF;
    content: "\f0d7";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding:6px 17px 6px 12px;
    height: 44px;
    margin-top: -14px;
    margin-right: -19px;
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion-heading a.accordion-toggle.collapsed:after{
    content: "\f0da";
    padding-left: 17px;
    padding-right: 17px;
    height: 44px;
    margin-top: -14px;
    margin-right: -19px;
    font-size: 22px;
}
.accordion-inner{
    padding:15px 0;
}

我无法将代码发布到 jsbin 或其他地方，但这里是代码工作的 url here

Answer 1

如果我正确理解了任务，我只用 css 解决了这个问题。

Here 是解决方案。

这是您的 css 规则 .accordion-heading a.accordion-toggle.collapsed:after 和 .accordion-heading a.accordion-toggle:after。您必须将这些规则合并到 .accordion-heading a.accordion-toggle.collapsed:after 并添加到 ".accordion-heading a.accordion-toggle.collapsed:after" :hover 选择器。使用另一个 content: "" 规则，应如下所示：.accordion-heading a.accordion-toggle.collapsed:hover:after。

以下 css 适合我：

.accordion-heading a {
    font-size: 14px;
    text-transform: capitalize;
    padding: 14px 20px 10px 0;
    font-weight: 600;
    width: 100%;
    font-family: Arial, sans-serif;
    display: block;
    border-bottom: 1px solid #EFEFEF;
    position: relative;
    background-color: #cbcbcb;
    padding-left: 12px;
    color: #333333;
    text-shadow: 0px 1px 0px rgba(255,255,255, .35);
}

.accordion-heading a.accordion-toggle:after {
    background: #949494;
}

.accordion-heading a:hover{
    background: #65b72f;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);
}

.accordion-heading a.accordion-toggle.collapsed:after {
    content: "test";
    padding-left: 17px;
    padding-right: 17px;
    height: 44px;
    margin-top: -14px;
    margin-right: -19px;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding:6px 17px 6px 12px;
    height: 44px;
    margin-top: -14px;
    margin-right: -19px;
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    font-family: FontAwesome;
    font-size: 22px;
    color: #EFEFEF;
}
.accordion-heading a.accordion-toggle.collapsed:hover:after{
    content: "something";
    padding-left: 17px;
    padding-right: 17px;
    height: 44px;
    margin-top: -14px;
    margin-right: -19px;
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding:6px 17px 6px 12px;
    height: 44px;
    margin-top: -14px;
    margin-right: -19px;
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    font-family: FontAwesome;
    font-size: 22px;
    color: #EFEFEF;
}
.accordion-inner{
    padding:15px 0;
}

我希望我的解释是可以理解的。

Answer 2

我认为你是插入符号进入i标签。如果是这样，这样就足够了吗？

它正在使用 css 选择器：

    .accordion-toggle:hover i

.accordion-heading a {
  font-size: 14px;
  text-transform: capitalize;
  padding: 14px 20px 10px 0;
  font-weight: 600;
  width: 100%;
  font-family: Arial, sans-serif;
  display: block;
  border-bottom: 1px solid #EFEFEF;
  position: relative;
  background-color: #cbcbcb;
  padding-left: 12px;
  color: #333333;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, .35);
}
.accordion-heading a.accordion-toggle:after {
  background: #949494;
}
.accordion-heading a:hover {
  background: #65b72f;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, .2);
}
;
 .accordion-heading a.accordion-toggle:after {
  font-family: FontAwesome;
  float: right;
  font-size: 22px;
  color: #EFEFEF;
  content: "\f0d7";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding: 6px 17px 6px 12px;
  height: 44px;
  margin-top: -14px;
  margin-right: -19px;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2), 1px 1px 1px rgba(255, 255, 255, .1);
}
.accordion-heading a.accordion-toggle.collapsed:after {
  content: "\f0da";
  padding-left: 17px;
  padding-right: 17px;
  height: 44px;
  margin-top: -14px;
  margin-right: -19px;
  font-size: 22px;
}
.accordion-inner {
  padding: 15px 0;
}

.accordion-toggle:hover i{
background:red;
}

<div class="accordion-group panel">
  <div class="accordion-heading">
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse292">
      <i>this?</i> Course Curriculum
    </a>
  </div>
  <div id="collapse292" class="accordion-body collapse in" style="height: auto;">
    <div class="accordion-inner"></div>
  </div>
</div>