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显示使用内容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或其他方面，但这里是代码工作的网址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并添加到＆＃34; .accordion-heading a.accordion-toggle.collapsed：after＆＃34; ：悬停选择器。使用其他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>

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

2 个答案: