Bootstrap extend button hover state

Question

I'm using bootstrap 4 for a website I'm building. I am using the bootstrap cards, in these cards I have the primary button (btn-primary). When hovering the card I want to trigger also the hover state of the button. Is there a way to accomplish this?

Can I force an element to display its hover effect? I tried the answer from this url but this doesn't work because the compiler throws an error that btn-primary:hover compound selectors may no longer be extended. It says to consider @extend .btn-primary, :hover. This works but this makes my css file huge because it's extending all kinds of hovers and not specifically for a button.

Is there an another way to trigger the hover state of a bootstrap button while not hovering the button itself?

Scss example I hope to accomplish if it's even possible

.card {
 &:hover {
  .btn {
   //Trigger the hover state of btn primary that is in the card here
  }
 }
}

You could always modify the CSS to apply the same rules on `:hover` to a class and then toggle the class on/off. — Liftoff, Apr 13 '21 at 16:44
Does this answer your question? [How to trigger CSS "hover state" using Javascript?](https://stackoverflow.com/questions/6406976/how-to-trigger-css-hover-state-using-javascript) — Liftoff, Apr 13 '21 at 16:47

valerius · Answer 1 · 2021-04-13T22:43:38.470

1

The easiest way is CSS expression like this. It matches with standard Bootstrap theme. You can use your own color theme.

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

If you have to implement more sophisticated behaviour you can use jQuery API (https://api.jquery.com/mouseover/) to send event to button with .mouseover() && .mouseout() or .mouseenter() && .mouseleave()

edited Apr 13 '21 at 22:43

answered Apr 13 '21 at 17:00

valerius

26
3

score 0 · Answer 2 · answered Apr 13 '21 at 17:03

You don't need @extend for that.

You can use CSS to change attributes for a button, without interacting with the button.

For example, you have 2 buttons and you want to change 1 button's background color when the container of the buttons is hovered and change to a different color when the first button is hoverd. You can do this:

.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>

Thank you for your answer. I know this is possible, but I actually want to trigger the hover state of the btn-primary without making a hover class for this myself (if this is even possible). — Rolinda Strijker, Apr 13 '21 at 17:29
Oh my bad, I think you get the element in js and then use the focus() method to trigger the hover effect. — Filip, Apr 13 '21 at 18:03

Bootstrap extend button hover state

2 Answers2