Question 44687 in Html Question posted in
Some basic documentation can be found here.

Hovering is done incorrectly on Bootstrap 5 cards – Html

I’m trying to build this website using only html/css and Bootstrap, and in this instance I want to get that hover effect when I hover over some cards (Cards are from Bootstrap 5), but when I add that :hover in css and hover over a card, it adds border on every subelement of that card, instead of only the outer frame. For example: This is what I want to happen:enter image description here

but instead I get this:

enter image description here

This is the code I tried:

<div class="row block">
     <div class="col-4 card-hover"> <-- This "card-hover" is responsible for hovering
           <div class="card-sizedown">
                <div class="card gap-3">
                     <img src="images/croatia luxury booking, villa tinka sumartin.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                              <h4 class="card-title text-family" style="font-weight:600">Villa Tinka - Sumartin <i class="fa fa-star ms-auto" aria-hidden="true" style="font-size: small; color:rgb(197, 136, 43)"></i><i class="fa fa-star ms-auto" aria-hidden="true" style="font-size: small; color:rgb(197, 136, 43)"></i><i class="fa fa-star ms-auto" aria-hidden="true" style="font-size: small; color:rgb(197, 136, 43)"></i><i class="fa fa-star ms-auto" aria-hidden="true" style="font-size: small; color:rgb(197, 136, 43)"></i><i class="fa fa-star ms-auto" aria-hidden="true" style="font-size: small; color:rgb(197, 136, 43)"></i></h4>
                              <p class="card-text"></p>
                              <p class="card-text" style="font-weight: 300">Swimming pool - Gym - Sauna - Free Parking - 
                                Free Wi-Fi - EV Charger - Concierge Service
                              </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

and this is the corresponding css:

.card-hover :hover{
    border: 2px solid rgb(197, 136, 43);
}
Tags:

3

Answers


  1. 0

    Looks like you need to use a different CSS selector…

    .card-hover .card:hover{
    border: 2px solid rgb(197, 136, 43);
}

    https://codeply.com/p/pDDWOa8xii

    Login or Signup to reply.
  2. 0

    Try this following example using Bootstrap 5.

    .main-card {
    width: 20rem;
    padding: 8px;
}
.main-card .card {
    border-radius: 0;
    border: 3px solid #fff;
    background: #eeeeee;
}
.main-card:hover {
    background: #579aff;
}
.main-card:hover .card {
    border: 3px solid #000;
}
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
        <title>Hello, world!</title>
    </head>
    <body>
        <div class="main-card">
            <div class="card">
                <img src="https://via.placeholder.com/300x200" class=""/>
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>
    Login or Signup to reply.
  3. 0

    The problem is that you apply styling to any element that is being hovered inside an element with the class card-hover. Just remove the space between .card-hover and :hover.

    Update: looks like hover effect should be applied to .card, not to .card-hover, because .card-hover is added to .col-4 which includes paddings.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search