Html 当我悬停链接或图标时，Div不会显示

在我的站点标题中，我有一个链接，在这个链接中，有一个购物车ikon

我的问题是，如果我将此链接悬停，则.cart\u hover div将不会显示。为什么？我做错了什么？我还尝试了显示，不只是可见性，但什么也没发生

在我的style.css文件中，这一行用于悬停

.header_kosar_link:hover > .cart_hover {visibility: visible;}

代码更新：

如果webshop购物车为空，则悬停有效。但是如果我向购物车中添加一些产品，则不会出现悬停。为什么?

<div class="col-md-2 d-flex justify-content-center justify-content-md-end align-items-center header_div">
            <a href="<?php echo $host; ?>/kosar" title="Kosár" class="header_kosar_link d-flex align-items-center">
                <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
                <span id="header_kosar_text" class="header_kosar_text"></span>
                <div class="cart_hover">
                    <div class="cart_hover_triangle"></div>
                    <span class="order_page_cart_title">Kosár tartalma</span>
                    <?php
                    if(!$cart->isEmpty())
                    {
                        show_products_in_cart_header();
                    }
                    else    
                    {
                        echo '<span class="cart_totalitem">A kosár üres.</span>';
                    }
                    ?>
                </div>
            </a>
        </div>

上面的css不起作用，因为.cart\u hover不是.header\u kosar\u链接的直接子项

您必须更改放置的方式。将鼠标悬停并使用

科尔塔尔玛酒店
科萨雷斯酒店。
a、 标题链接：hover~.cart\u hover{
能见度：可见；
}

您必须使用这种格式进行标记。

 <div class="header_kosar_link">

      <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
      <span id="header_kosar_text" class="header_kosar_text">0</span>

    <div class="cart_hover">
      <div class="cart_hover_triangle"></div>
      <span class="order_page_cart_title">Kosár tartalma</span>
      <span class="cart_totalitem">A kosár üres.</span>  
    </div>

</div>

0
科尔塔尔玛酒店
科萨雷斯酒店。

---

然后你的悬停将工作…因为它的工作基于父div。我希望你能理解我的观点。

请发布完整的代码嗨！我把密码改成了这个。但是，如果它不是购物车中的物品，则悬停可以工作。如果我在购物车中添加一些物品，它将无法工作。你可以在链接上试试。

     <div class="col-md-2 d-flex justify-content-center justify-content-md-end align-items-center header_div">
   <a href="https://projektar.hu/kosar" title="Kosár" class="header_kosar_link d-flex align-items-center">
      <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
      <span id="header_kosar_text" class="header_kosar_text">0</span>
   </a>
   <div class="clearfix"></div>
   <div class="cart_hover">
      <div class="cart_hover_triangle"></div>
      <span class="order_page_cart_title">Kosár tartalma</span>
      <span class="cart_totalitem">A kosár üres.</span>
   </div>
</div>

    a.header_kosar_link:hover ~ .cart_hover {
        visibility: visible;
    }

 <div class="header_kosar_link">

      <i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i>
      <span id="header_kosar_text" class="header_kosar_text">0</span>

    <div class="cart_hover">
      <div class="cart_hover_triangle"></div>
      <span class="order_page_cart_title">Kosár tartalma</span>
      <span class="cart_totalitem">A kosár üres.</span>  
    </div>

</div>