C.Ham C.Ham - 1 month ago 10
CSS Question

Transform and Transition, what should I be targeting?

I was wondering if someone could help me out and explain what I can do to make this work. I am simply trying to make the div get slightly larger when the user hovers over the title of the panel. I have scaled down the panel successfully but I can't remove it when the mouse hovers over it.

I know this is probably very simple but I have been struggling for hours now.

I would be grateful if someone could help me out,

Thanks in advance.



.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

Answer

I think you simply need to define style for .panel-default .panel-heading:hover instead of .panel-default .panel-heading > a:hover > .panel-default .panel-heading like this:

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

In your style definition you try to define style for parent element of "hovered" tag a but it's impossible using CSS. So your rule for .panel-default .panel-heading > a:hover > .panel-default .panel-heading works for 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>