文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >转型和转型，我应该瞄准什么？

问转型和转型，我应该瞄准什么？
EN

Stack Overflow用户
提问于 2016-11-04 17:52:46
回答 2查看 44关注 0票数 0

我想知道是否有人能帮我解释一下我能做些什么来完成这个任务。当用户悬停在面板的标题上时，我只是想让div变得稍微大一点。我已经成功地缩小了面板，但当鼠标悬停在面板上时，我无法移除它。

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

如果有人能帮我，我会很感激的，

提前谢谢。

​

代码语言：javascript
运行
复制
.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);
}
代码语言：javascript
运行
复制
<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

css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-11-04 18:48:39

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

代码语言：javascript
运行
复制
.panel-default .panel-heading:hover {
  -webkit-transform: none;
  transform: none;
}

在样式定义中，您尝试为“悬浮”标记a的父元素定义样式，但使用CSS是不可能的。所以你对.panel-default .panel-heading > a:hover > .panel-default .panel-heading的规则毫无用处

​

代码语言：javascript
运行
复制
.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;
 }
代码语言：javascript
运行
复制
<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
EN

Stack Overflow用户

发布于 2016-11-04 18:52:20

下面是如何使用transition和transform，您将不得不使用它，这样它的行为就像您想要的那样。

代码语言：javascript
运行
复制
.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;

}

片段

​

代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40428966

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档