CODEWITHSUNDEEP
htmlcss
M.Ramzan
M.Ramzan

Reputation: 317

CSS hovering doesn't work as expected

I want to display set of buttons which I wrapped with a span element on a hovering effect, initially one button will be shown and when user hovers over the span element initially showed button will be hidden and other buttons will be shown.

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}

.buttons:hover .listbtn {
    opacity: 1;
}

.settingsbtn {
    opacity: 1;
    transition: opacity .35s ease;
}

.buttons:hover .settingsbtn {
    opacity: 0;
}

.btn {
    padding: 6px 12px;
    display: inline-block;
    margin-top: -10px;
    text-transform: capitalize;
    margin-left: 6px;
    float: right;
}

.spaceTest {
    margin-left: 32px;
}

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}
<span class="buttons">
     <button type="submit" class="btn btn-danger pull-right settingsbtn">
         <i class="material-icons">settings</i>
     </button>
     <a routerLink="/errors/{{message.id}}">
        <button type="submit" class="btn btn-danger pull-right listbtn">
            <i class="material-icons">content_paste</i>
        </button>
     </a>
     <button *ngIf="isScanning" type="submit" class="btn btn-danger pull-right spaceTest listbtn">
          <i class="material-icons">refresh</i>
      </button>
      <button type="submit" class="btn btn-danger pull-right listbtn">
          <i class="material-icons">delete</i>
      </button>
      <button type="submit" class="btn btn-danger pull-right listbtn">
          <i class="material-icons">mode_edit</i>
      </button>
</span>

enter image description here

The problem I am facing is when user moves mouse between delete and rescan buttons icons are disappearing which shouldn't be as I am using css hovering for the span. Could you please describe to me what I am doing wrong?

Upvotes: 0

Views: 339

Answers (1)

Robert Cooper
Robert Cooper

Reputation: 2250

The issue you are encountering is caused by the pull-right classes that are added to your button elements. This causes the buttons to be floated to the right and therefore the wrapper span element cannot be hovered over when pointing your cursor between your floated buttons.

Here is a CodePen I made to demonstrate your issue: https://codepen.io/robertcooper_rc/pen/mqYGKN. I've got the functionality working as you desire at the moment, but if you uncomment the last three lines of CSS, you will see how the pull-right class affects the hovering of your buttons.

The styles for pull-right are added through Bootstrap. See the documentation for Bootstrap quick floats here: https://getbootstrap.com/docs/3.3/css/#helper-classes-floats

Solution - Clearfix

One way to solve this is by applying a "clearfix" to the span element to take care of all the floated elements inside of it. Here is what a clearfix looks like in CSS:

// Clearfix
.buttons:after {
  content: "";
  display: table;
  clear: both;
}

The clearfix forces the span element to take up a width and height that is large enough to contain the floated elements. Without the clearfix, the span's height collapses to 0 if all child elements are floated and this is what is preventing you from hovering over the span.

Upvotes: 1

Related Questions