css Bootstrap 5卡上的悬停不正确

cbeh67ev  于 2023-03-05  发布在  Bootstrap
关注(0)|答案(3)|浏览(162)

我尝试只用html/css和Bootstrap来构建这个网站,在这个例子中,我想在我悬停在一些卡片上时获得悬停效果(卡片来自Bootstrap 5),但是当我添加:悬停在css中并悬停在一张卡片上时,它会在卡片的每个子元素上添加边框,而不仅仅是外框。这就是我想要的结果:x1c 0d1x
但我得到的却是这个

这是我尝试的代码:

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

这是相应的CSS:

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

uplii1fm1#

问题是,您要对任何悬停在类为card-hover的元素中的元素应用样式,只需删除.card-hover:hover之间的空格即可。

更新:似乎悬停效果应应用于.card,而不是.card-hover,因为.card-hover已添加到包含填充的.col-4

ilmyapht

ilmyapht2#

看起来你需要使用不同的CSS选择器...

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

https://codeply.com/p/pDDWOa8xii

xwbd5t1u

xwbd5t1u3#

使用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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

相关问题