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

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;
}

我无法 post 将代码发送到 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>

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

Changing a caret button on hovering over its parent element

html

css

twitter-bootstrap

accordion

font-awesome