Question

我的html页面中有手风琴，我需要在标题（面板标题）内移动文字，以便在使用css3过渡时悬停一点

我试过的内容如下：

HTML

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading headtext">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body headtext">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</div>
     </div>
    </div>
    <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
      Collapsible Group Item #2
    </a>
  </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
</div>
   </div>
  </div>

的CSS：

.panel-title > a {
color: #43C3E8;
}
.panel-title > a:hover {
color: #F06426;
padding-left:20px;
text-decoration:none;
outline:none;
transition:all 0.2s ease 0s;
}

.panel-heading {
transition: all 0.2s ease 0s;
}

执行此操作后，我得到的是悬停过渡应用于锚标记内的文本。但是当删除光标时，文本移动得更快。我希望此过渡时间与悬停相同。

Answer 1

在元素中添加转换，而不是在：hover

a {
    display: inline-block;
    color: white;
    text-decoration:none;
    padding: 20px;
    background: black;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

a:hover {
    background: red;       
}

http://jsfiddle.net/Lw8UM/

在手风琴面板标题中应用过渡

1 个答案: