lundi 20 avril 2015

CSS Container on hover should stay fixed

I have couple of Bootstrap row containers which on hover they are getting a dashed border and on the top of some grouped buttons are highlighted.

Now when I hover on the container this hover effect should have a fixed position to not generate any annoying up and down moving of the container but can't really handle this properly.

here is my plunkr

and some snippets from my markup

/* Styles go here */

/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
  .container {
    max-width: 730px;
  }
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
  #oc-visual-composer {
    display: block;
    padding: 20px;
    border: 1px silver dashed;
    margin-top: 50px;
  }
  #oc-visual-composer .editor_buttons {
    display: inline-block;
    margin: auto 47%;
  }
  #oc-visual-composer:hover a {
    color: black;
  }
  .editor-controls {
    display: block;
    position: relative;
    padding-top: 15px;
  }
  .editor-controls .btn-sm,
  .editor-controls .btn-group-sm > .btn,
  .editor-controls .btn-group-sm > .btn {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  .editor-controls .btn-sm button,
  .editor-controls .btn-group-sm > .btn button,
  .editor-controls .btn-group-sm > .btn button {
    display: none;
  }
  .editor-controls button {
    display: none;
  }
  .editor-controls button:first-child {
    display: block;
  }
  .editor-controls button:last-child {
    display: block;
  }
  .editor-controls .btn-group-sm.active button {
    display: inline-block;
  }
  .editor-controls .btn-group-sm.active button:last-child {
    display: none;
  }
  .editor-controls:hover .row-controll.btn-group-sm {
    display: block;
  }
  .editor-controls:hover .column-controll.btn-group-sm {
    display: block;
  }
  .editor-controls:hover button.add {
    display: block;
  }
  .editor-controls:hover .editor-row {
    border: 1px silver dashed;
    padding: -3px;
    display: block;
    position: relative;
  }
  .editor-controls:hover .editor-row button.add {
    display: block;
  }
  .editor-controls .row-controll.btn-group-sm {
    display: none;
    position: relative;
    left: -15px;
    position: relative;
    top: -11px;
    z-index: 3;
  }
  .editor-controls .row-controll.btn-group-sm button {
    border: none;
    transition: background-color 0.3s ease;
    background-color: #093459;
    color: #fff;
  }
  .editor-controls .row-controll.btn-group-sm button i {
    color: white;
  }
  .editor-controls .row-controll.btn-group-sm button:hover {
    background: #032644;
  }
  .editor-controls .row-controll.btn-group-sm .row-handle.btn.btn-default {
    cursor: move;
  }
  .editor-controls .column-controll.btn-group-sm {
    display: none;
    position: relative;
    left: -10px;
    position: relative;
    top: -11px;
    z-index: 3;
  }
  .editor-controls .column-controll.btn-group-sm button {
    border: none;
    transition: background-color 0.3s ease;
    background-color: orange;
    color: #fff;
  }
  .editor-controls .column-controll.btn-group-sm button i {
    color: white;
  }
  .editor-controls .column-controll.btn-group-sm button:hover {
    background: #e78800;
  }
  .editor-controls .column-controll.btn-group-sm button:hover .editor-row {
    border: 1px silver dashed;
    padding: -3px;
    display: block;
    position: relative;
  }
  .editor-controls button.add {
    display: none;
    background-color: #f9b418;
    margin: 0 auto;
    position: relative;
    bottom: 2px;
    padding: 0px 5px;
    border-radius: 2px !important;
    transition: background-color 0.3s ease;
  }
  .editor-controls button.add:after {
    position: absolute;
    top: -9px;
    left: 0px;
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #f9b418;
    border-left: 4px solid transparent;
    transition: background-color 0.3s ease;
    content: '';
  }
  .editor-controls button.add:hover {
    background: #e78800;
  }
  .editor-controls button.add:hover:after {
    position: absolute;
    top: -9px;
    left: 0px;
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #e78800;
    border-left: 4px solid transparent;
    content: '';
  }
  .editor-controls button.add .btn-sm,
  .editor-controls button.add .btn-group-sm > .btn,
  .editor-controls button.add .editor-controls .btn-group-sm > .btn,
  .editor-controls button.add .editor-controls .btn-group-sm > .btn {
    border-bottom-left-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
  }
  .editor-controls button.add i {
    color: #fff;
  }
  .editor-row {
    padding: 1px;
    margin-top: 15px;
  }
  .editor-row:hover {
    border: 1px silver dashed;
    display: block;
    position: relative;
  }
  .editor-row:hover:: after {
    display: block;
    content: '';
    font-weight: bold;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
  }
  a {
    color: silver;
  }
  .controls {
    display: none;
  }
  .modal-dialog .modal-content {
    border-radius: 0;
  }
  .modal-dialog .modal-header {
    background-color: #093459;
    padding: 10px;
    color: #fff;
    cursor: move;
  }
  .modal-dialog .modal-footer {
    padding: 10px;
  }
  .modal-dialog button.close {
    color: #fff;
  }
  .modal-dialog .large {
    width: 80%;
  }
  .modal .fade,
  .modal .in {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
  .modal img.preloader {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .modal .large {
    width: 80%;
  }
  .modal h4 {
    font-size: 16px;
    font-weight: 300;
  }
  .modal-backdrop.in {
    opacity: 0;
  }
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap-css@*" />
  <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

  <body>
    <div class="container sortable-rows">
      <div class="editor-controls">
        <div data-type="row" class="row-controll btn-group btn-group-sm" role="group">
          <button type="button" class="row-handle btn btn-default">
            <i class="fa fa-arrows-alt"></i>
            Row
          </button>
          <button data-control="edit" type="button" title="edit Row content" class="row-edit btn btn-default">
            <i class="fa fa-pencil"></i>
          </button>
          <button data-control="grid" type="button" class="grid btn btn-default">
            <i class="fa fa-list"></i>
          </button>
          <button data-control="add" type="button" class="components btn btn-default">
            <i class="fa fa-plus"></i>
          </button>
          <button data-control="clone" type="button" class="clone btn btn-default">
            <i class="fa fa-copy"></i>
          </button>
          <button data-control="delete" type="button" class="delete btn btn-default">
            <i class="fa fa-trash-o"></i>
          </button>
          <button type="button" class="btn btn-default expand">
            <i class="fa fa-caret-right"></i>
          </button>
        </div>
        <div data-type="row" class="column-controll btn-group btn-group-sm active" role="group">
          <button type="button" class="btn btn-default">
            <i class="fa fa-arrows-alt"></i>
            Column
          </button>
          <button type="button" class="btn btn-default">
            <i class="fa fa-pencil"></i>
          </button>
          <button type="button" class="btn btn-default">
            <i class="fa fa-plus"></i>
          </button>
          <button type="button" class="btn btn-default">
            <i class="fa fa-trash-o"></i>
          </button>
          <button type="button" class="btn btn-default expand-column expand">
            <i class="fa fa-caret-right"></i>
          </button>
        </div>
        <div class="row editor-row ">
          <div class="col-lg-12 ">
            <div class="post-preview">
              <a href="post.html">
                <h2 class="post-title">
                                    Man must explore, and this is exploration at its greatest
                                </h2>
                <h3 class="post-subtitle">
                                    Problems look mighty small from 150 miles up
                                </h3>
              </a>
              <p class="post-meta">Posted by <a href="#">Start Bootstrap</a>
                on September 24, 2014</p>
            </div>
            <hr />
            <div class="post-preview">
              <a href="post.html">
                <h2 class="post-title">
                                    I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
                                </h2>
              </a>
              <p class="post-meta">Posted by <a href="#">Start Bootstrap</a>
                on September 18, 2014</p>
            </div>
            <hr />
            <div class="post-preview">
              <a href="post.html">
                <h2 class="post-title">
                                    Science has not yet mastered prophecy
                                </h2>
                <h3 class="post-subtitle">
                                    We predict too much for the next year and yet far too little for the next ten.
                                </h3>
              </a>
              <p class="post-meta">Posted by <a href="#">Start Bootstrap</a>
                on August 24, 2014</p>
            </div>
            <hr />
            <div class="post-preview">
              <a href="post.html">
                <h2 class="post-title">
                                    Failure is not an option
                                </h2>
                <h3 class="post-subtitle">
                                    Many say exploration is part of our destiny, but it’s actually our duty to future generations.
                                </h3>
              </a>
              <p class="post-meta">Posted by <a href="#">Start Bootstrap</a>
                on July 8, 2014</p>
            </div>
            <hr />
            <!-- Pager -->
            <ul class="pager">
              <li class="next">
                <a href="#">Older Posts →</a>
              </li>
            </ul>
          </div>
        </div>
        <button class="btn btn-sm add">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      <div class="editor-controls">
        <div class="row-controll btn-group btn-group-sm active" role="group">
          <button type="button" class="row-handle btn btn-default">
            <i class="fa fa-arrows-alt"></i>
            Row
          </button>
          <button data-control="edit" type="button" class="btn btn-default">
            <i class="fa fa-pencil"></i>
          </button>
          <button data-control="grid" type="button" class="btn btn-default">
            <i class="fa fa-list"></i>
          </button>
          <button data-control="add" type="button" class="btn btn-default">
            <i class="fa fa-plus"></i>
          </button>
          <button data-control="clone" type="button" class="btn btn-default">
            <i class="fa fa-copy"></i>
          </button>
          <button data-control="delete" type="button" class="btn btn-default">
            <i class="fa fa-trash-o"></i>
          </button>
          <button type="button" class="btn btn-default expand">
            <i class="fa fa-caret-right"></i>
          </button>
        </div>
        <div class="column-controll btn-group btn-group-sm" role="group">
          <button type="button" class="btn btn-default">
            <i class="fa fa-arrows-alt"></i>
            Column
          </button>
          <button type="button" class="btn btn-default">
            <i class="fa fa-pencil"></i>
          </button>
          <button type="button" class="btn btn-default">
            <i class="fa fa-plus"></i>
          </button>
          <button type="button" class="btn btn-default">
            <i class="fa fa-trash-o"></i>
          </button>
          <button type="button" class="btn btn-default expand">
            <i class="fa fa-caret-right"></i>
          </button>
        </div>
        <div class="row editor-row">
          <div class="col-lg-4"></div>
          <div class="col-lg-4"></div>
          <div class="col-lg-4"></div>
        </div>
        <button class="btn btn-sm add">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      <div data-editor="" id="oc-visual-composer" class="row">
        <div class="editor_buttons">
          <a id="vc_no-content-add-element" class="vc_add-element-button vc_add-element-action vc_btn vc_btn-grace vc_btn-md vc_btn_3d" href="#addElement" title="Add element">
            <i class="fa fa-plus fa-2x"></i>
          </a>
        </div>
      </div>
    </div>
  </body>

</html>

enter link description here

Aucun commentaire:

Enregistrer un commentaire