css Bootstrap 5卡上的悬停不正确

cbeh67ev 于 2023-03-05 发布在 Bootstrap

关注(0)|答案(3)|浏览(163)

我尝试只用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);
}

css

来源：https://stackoverflow.com/questions/75604003/hovering-is-done-incorrectly-on-bootstrap-5-cards

3条答案

按热度按时间

uplii1fm1#

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

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

赞(0）回复(0）举报 2023-03-05

ilmyapht2#

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

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

https://codeply.com/p/pDDWOa8xii

赞(0）回复(0）举报 2023-03-05

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>

赞(0）回复(0）举报 2023-03-05

我来回答

css Bootstrap 5卡上的悬停不正确

3条答案

相关问题

热门标签

最新问答