Expanding the hover state of a Bootstrap button

Question

Expanding the hover state of a Bootstrap button

I am currently working on a website with bootstrap 4 and I am utilizing the bootstrap cards, which includes the primary button (btn-primary). My goal is to trigger the hover state of the button when hovering over the card itself. Is there a way to achieve this?

Is it possible to force an element to show its hover effect? I attempted the solution provided in the mentioned link, however, it did not work as expected. The compiler threw an error stating that btn-primary:hover compound selectors cannot be extended anymore. It suggested using @extend .btn-primary, :hover instead. While this solution works, it leads to bloating my CSS file by extending all types of hovers rather than just for buttons.

Are there other methods to activate the hover state of a bootstrap button without hovering directly over the button itself?

Below is an example of what I hope to accomplish in SCSS, if at all possible:

.card {
 &:hover {
  .btn {
   //Need to trigger the hover state of btn-primary within the card here
  }
 }
}

html css bootstrap-4

Answer 1

Answer №1

To easily change the CSS styling for a Bootstrap theme, you can use this simple CSS expression. It's adaptable to any color scheme you prefer.

.card:hover a { 
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc; 
}

For more advanced functionality, consider utilizing jQuery API (https://api.jquery.com/mouseover/) to trigger events like .mouseover() && .mouseout() or .mouseenter() && .mouseleave()

Answer 2

To easily change the CSS styling for a Bootstrap theme, you can use this simple CSS expression. It's adaptable to any color scheme you prefer.

.card:hover a { 
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc; 
}

For more advanced functionality, consider utilizing jQuery API (https://api.jquery.com/mouseover/) to trigger events like .mouseover() && .mouseout() or .mouseenter() && .mouseleave()

Answer 3

Answer №2

You don't have to rely on @extend in this case.

You can easily use CSS to alter the properties of a button without directly targeting the button itself.

For instance, if you have two buttons and you want to modify one button's background color when the container housing the buttons is hovered over, and change it to a different color when the first button is hovered over, you can achieve this using the following code:

.buttons {
  position: relative;
  text-align: center;
  border: 1px solid black;
}

.btn,
.btn2 {
  cursor: pointer;
  font-size: 20px;
  border: 2px solid black;
  border-radius: 4px;
  padding: 30px;
  background-color: red;
  transition: all 0.3s ease-in-out;
}

.btn2:hover {
  background-color: white;
}

.buttons:hover .btn {
  color: white;
  background-color: blue;
}

.btn:hover {
  color: white!important;
  background-color: orange!important
}

<body>
  <div class="buttons">
    <button class="btn">Button #1</button>
    <br><br><br>
    <button class="btn2">Button #2</button>
  </div>
</body>

Answer 4

You don't have to rely on @extend in this case.

You can easily use CSS to alter the properties of a button without directly targeting the button itself.

For instance, if you have two buttons and you want to modify one button's background color when the container housing the buttons is hovered over, and change it to a different color when the first button is hovered over, you can achieve this using the following code:

.buttons {
  position: relative;
  text-align: center;
  border: 1px solid black;
}

.btn,
.btn2 {
  cursor: pointer;
  font-size: 20px;
  border: 2px solid black;
  border-radius: 4px;
  padding: 30px;
  background-color: red;
  transition: all 0.3s ease-in-out;
}

.btn2:hover {
  background-color: white;
}

.buttons:hover .btn {
  color: white;
  background-color: blue;
}

.btn:hover {
  color: white!important;
  background-color: orange!important
}

<body>
  <div class="buttons">
    <button class="btn">Button #1</button>
    <br><br><br>
    <button class="btn2">Button #2</button>
  </div>
</body>

Expanding the hover state of a Bootstrap button

Answer №1

Answer №2

Similar questions

What is the best way to retrieve both the checked and unchecked values from a collection of checkboxes?

Alert triggers a transformation in the background

Is it possible to use the AngularJS function with the <div> HTML element?

The spacing issue for Bootstrap-5 justify-content is causing elements to not have any space in between

How to vertically center align divs of unpredictable height

What is the best way to have my transparent navigation bar float on top of my background in a parallax-scrolling website?

After exiting the PWA, the IOS camera displays a black screen

Finding your current location and address using HTML5 geolocation

Utilizing CSS to style text on a menu by applying a specific class to an unordered list element

Discovering which templates are making call to the base in Django

Troubleshooting directive not functioning properly with AngularJS ng-click

What are some other ways to include multiple HTML "submit" buttons within a form?

Looking to extract a Twitter handle using Python's BeautifulSoup module?

What is the best way to position a button directly to the right of a text box with no space in

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Google Book API is a tool provided by Google that

Automatically close Bootstrap 4 modal popups

width restriction to only accommodate on two lines

Creating a dynamic 3x3 layout using flexbox: a step-by-step guide

Combining jqueryUI autocomplete and datalist for enhanced user input options