变换和过渡，我应该瞄准什么？

时间：2016-11-04 17:52:46

标签： css

我想知道是否有人可以帮助我并解释我能做些什么来使这项工作。当用户将鼠标悬停在面板标题上时，我只是想让div稍大一些。我已经成功缩小了面板，但当鼠标悬停在面板上时我无法将其移除。

我知道这可能很简单，但我现在已经挣了几个小时。

如果有人可以帮助我，我将不胜感激 提前谢谢。

.panel-default .panel-heading {
  color: #333;
  background-color: rgba(118, 130, 255, 0.7);
  border-radius: 0px;
  border: 1px solid grey;
  box-shadow: 3px 4px 10px grey;
  width: 75%;
  margin: auto auto;
  -webkit-transform: scale(.8, .8);
  transform: scale(.8, .8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-default .panel-heading > a:hover > .panel-default .panel-heading,
.panel-default .panel-heading > a:focus > .panel-default .panel-heading {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <div class="panel-heading">
            <h4>Title of Panel</h4>
          </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong > - 01/01/2001 </em>
          </div>
          <hr>
          <div class="panel-body">

          </div>

        </div>
      </div>
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <div class="panel-heading">
            <h4>Title of Panel2</h4>
          </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong> - 01/01/2001</em>
          </div>
          <hr>
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

k.imgur.com/YL2mY.png

2 个答案:

答案 0 :(得分：1)

我认为您只需要为.panel-default .panel-heading:hover而不是.panel-default .panel-heading > a:hover > .panel-default .panel-heading定义样式：

.panel-default .panel-heading:hover {
  -webkit-transform: none;
  transform: none;
}

在您的样式定义中，您尝试为“hovered”标记a的父元素定义样式，但使用CSS是不可能的。 因此，.panel-default .panel-heading > a:hover > .panel-default .panel-heading的规则适用于 nothing 

.panel-default .panel-heading {
  color: #333;
  background-color: rgba(118, 130, 255, 0.7);
  border-radius: 0px;
  border: 1px solid grey;
  box-shadow: 3px 4px 10px grey;
  width: 75%;
  margin: auto auto;
  -webkit-transform: scale(.8, .8);
  transform: scale(.8, .8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-default .panel-heading:hover {
  -webkit-transform: none;
  transform: none;
 }
<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <div class="panel-heading">
            <h4>Title of Panel</h4>
          </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong > - 01/01/2001 </em>
          </div>
          <hr>
          <div class="panel-body">

          </div>

        </div>
      </div>
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <div class="panel-heading">
            <h4>Title of Panel2</h4>
          </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong> - 01/01/2001</em>
          </div>
          <hr>
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

以下是您使用transition和transform的方式，您必须使用它，以便它按照您的喜好行事。

.zoom h4 {
  line-height: 1.5;
  font-size:18px;
  transition: font-size .7s linear;
  transform: scale(1,1);
  transform-origin:0% 20%;
}
.zoom:hover h4 {
  font-size:22px;
  transition: all .7s linear;
  transform: scale(1.2,1.2);
  transform-origin:45% 20%;
  text-align: center;

}

段

.panel-default .panel-heading {
  color: #333;
  background-color: rgba(118, 130, 255, 0.7);
  border-radius: 0px;
  border: 1px solid grey;
  box-shadow: 3px 4px 10px grey;
  width: 75%;
  margin: auto auto;
  -webkit-transform: scale(.8, .8);
  transform: scale(.8, .8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.panel-default .panel-heading > a:hover > .panel-default .panel-heading,
.panel-default .panel-heading > a:focus > .panel-default .panel-heading {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.zoom h4 {
  line-height: 1.5;
  font-size: 18px;
  transition: font-size .7s linear;
  transform: scale(1, 1);
  transform-origin: 0% 20%;
}
.zoom:hover h4 {
  font-size: 22px;
  transition: all .7s linear;
  transform: scale(1.2, 1.2);
  transform-origin: 45% 20%;
  text-align: center;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="row">
  <div class="col-md-10 col-md-offset-1 text-center">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
          <div class="panel-heading zoom">
            <h4>Title of Panel</h4>
          </div>
        </a>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong > - 01/01/2001 </em>
          </div>
          <hr>
          <div class="panel-body">

          </div>

        </div>
      </div>
      <div class="panel panel-default">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
          <div class="panel-heading zoom">
            <h4>Title of Panel2</h4>
          </div>
        </a>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-footer"><em><strong>Author</strong> - 01/01/2001</em>
          </div>
          <hr>
          <div class="panel-body">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题