StringsOnFire StringsOnFire - 1 month ago 10
Less Question

What styling is used for the hover state of a Close Button on a Bootstrap Dismissible Alert?

When I hover over the close button on a Bootstrap 3 Dismissible Alert, what styling am I seeing?

I know the colour is changed to black, but I can't figure out what the opacity is.

Context: I'm working backwards and putting this into Sketch for a design using customised Bootstrap components.

Answer

By using the inspect elements in chrome browser you can toggle hover effects, you see the button having the .close class. This is what causing the button to be black. Following styles apply:

.close:focus, .close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}