How to change the border color of a Bootstrap card when hovered over

I'm struggling to achieve a border color change effect on hover for Bootstrap cards.

<b-card no-body class="my-card border">
    <button>Click here</button>

    <b-collapse>
      <b-card-body>
         <b-card-text>text here</b-card-text>
      </b-card-body>
    </b-collapse>
<b-card>

I attempted to modify the b-card border color using a CSS class I created, however, it did not yield the desired result.

.my-card:hover {
    border-color:#3E7DC0;
}

I also tried an alternative approach (unsure if correct), which also proved unsuccessful.

b-card:hover {
   border-color:#3E7DC0;
}

Any suggestions on how to resolve this issue? Thank you in advance.

edit: I aim for my card to have a grey border that transitions to blue when hovered over. The reason why the hover effect isn't working might be due to the presence of the border class in this line of code 

<b-card no-body class="my-card border">
Removing border allows the hover effect to work, but eliminates the initial border.

update: I managed to address the problem by incorporating !important like so

b-card:hover {
   border: 1px solid #3E7DC0 !important;
}

However, I understand that relying on !important is not recommended. Are there any other solutions available?

cssbootstrap-4

Answer №1

I'm not entirely sure about your specific requirements, but by making the following adjustment:

.my-card:hover {
    border-color:#3E7DC0;
}

to:

.my-card:hover {
    border: 2px solid #3E7DC0;
}

you will notice some changes. Based on my interpretation of your needs:

  <div class="test1">
      <b-card no-body class="my-card border">
          <button>Click here</button>
    
          <b-collapse>
              <b-card-body>
                  <b-card-text>text here</b-card-text>
              </b-card-body>
          </b-collapse>
      <b-card>
  </div>

CSS:

.test1:hover {
  border: 2px solid #3E7DC0;
}

Please let me know if this meets your expectations. While I may not have extensive experience, I am eager to assist in any way I can.

Answer №2

I attempted implementing your css:

b-card:hover {
   border: 1px solid #3E7DC0 !important;
}

After removing !important, everything functions the same for me. It seems like it may be overridden by different CSS properties; using !important prevents this from happening.

If you provide me with all your html and css code, I might be able to identify the underlying issue.

Answer №3

Give this a shot:

.my-card:hover {
    border:1px solid #3E7DC0;
}

Answer №4

If you want to change the border styling, simply remove the border class and apply it directly to the .my-card class.

Here is an example:

.my-card{
   border:1px solid gray;
 }

.my-card:hover{
   border-color:blue;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

Is there a way to achieve the layout described below without relying on tables? Left element (100px) | Right element (occupies remaining space, even with no content) Thank you! Edit: Here's the link to the code: http://pastebin.com/vU33jNxD ...

csslayout

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

Having trouble removing lines from Router Link? Unfortunately, using style={{'textDecoration': 'none'}} doesn't seem to be doing the trick

Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file import React,{useState} from "react"; import { mak ...

cssreactjs

What is the best way to effectively incorporate Ruby into the CSS attribute of a HAML %li element?

Greetings everyone, I am new to the world of development and seeking guidance from experienced individuals. I have been trying to solve a coding issue for quite some time now. I am currently enrolled in a programming course at Code Academy based in Chicago ...

ruby-on-railscsshamlerbinterpolation

The webpage appears fine on the local server, but displays incorrectly on IIS (Internet Explorer 11)

My project looks great when I run it locally on my computer and open the page in Internet Explorer 11: https://i.stack.imgur.com/yZvo2.png However, when I deploy the page to an IIS server and navigate to the page, it appears differently in Internet Explo ...

htmlcssasp.net-mvcinternet-explorer-11

Using JQuery to parse an XML file and automatically redirecting the page if a specific attribute equals "Update"

Updated I've made some edits to clarify my request. My website is built using HTML5, CSS3, and JQuery, resulting in all content being on one page. During updates, I want the ability to set an option in a configuration file so that when users visit m ...

javascriptjqueryhtmlcssweb-config

Ways to create a noticeable effect on an image button when hovering without causing a shift in the position

Check out my simple script here: http://jsfiddle.net/PA9Sf/ I am looking to make a specific button stand out when hovered over without affecting the position of other buttons on the page. The current implementation in the provided jsfiddle moves the butto ...

javascriptjqueryhtmlcss

Do frameworks typically result in redundant CSS declarations?

Working on my latest Wordpress theme project, I have integrated the Bootstrap framework. One of the styles included in the Bootstrap CSS file is: input, textarea, .uneditable-input { width: 206px; } This style rule is causing issues with how my search ...

csstwitter-bootstrapframeworks

Unable to render Material Icons on Vue/Quasar web app hosted on Azure

I am facing an issue with my webapp built using Vue and Quasar. I added the necessary icon imports to my quasar-user-options.js file. import '@quasar/extras/material-icons/material-icons.css' import "@quasar/extras/material-icons-outlined/ma ...

cssvue.jsazure-web-app-servicequasar-frameworkmaterial-icons

What is the best way to attach an image to the image section coming from the backend in vue.js?

I have developed a frontend page that displays a list of books, with the data coming from the backend. The backend response includes image files, and I am struggling to bind these images to the image section of my template. I have the image paths from the ...

htmlcssvue.jssass

Modifying the border hue of Material-UI's Select Component

Here is the Select component I've created using materials-UI <FormControl variant="outlined"> <Select value={this.state.value} onChange = {this.handleChange} className={this.props.classes.select} inputProps = {{class ...

cssreactjsmaterial-ui

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

Is it possible to place two identical canvases on top of each other beside a separate canvas?

Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png Attempting to address this issue with the ...

csshtmlcanvas

The height attribute in HTML tables fails to restrict height in Firefox

Is there a way to restrict the height of a table while still being able to scroll through the hidden elements? I've tried a few methods but none seem to work as intended: http://www.example.com/code/example table.ex1 { table-layout: auto; h ...

htmlcss

Concealing the pagination buttons for next and previous in Material-UI TablePagination

Is there a way to remove the next and prev buttons in the TablePagination component without affecting the position of the "Showing ..." text? Should I handle this through CSS styling or by configuring the component settings? https://i.sstatic.net/7EkKd.pn ...

cssreactjsmaterial-ui

An alternative to Firebug for Internet Explorer

Can anyone suggest a suitable replacement for Firebug that is compatible with IE 7 and 8? I need a tool that allows me to edit CSS/HTML in real-time, debug JavaScript code, and visualize the positions of elements on web pages. Appreciate any recommendati ...

htmlcssinternet-explorerfirefoxfirebug

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

csscss-animationskeyframe

The jQuery Show Hide feature is experiencing issues specifically on Internet Explorer

Everything looks good in Firefox and Chrome, but unfortunately it's malfunctioning in IE. Does anyone have a suggestion for hiding select Dropdown options? I attempted using CSS with display: none but it didn't work. $j("#id option[value=&apos ...

javascriptjquerycss

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage