Question

所以我正在为我的公司创建一个网上商店，我做了一个下拉菜单，选择不同类型的产品类别。我的产品列在下拉菜单下方，下拉菜单本身会覆盖不同的产品图像。我的想法是能够将鼠标悬停在产品图片上，以便能够看到有关该产品的一些信息。为了达到这个目的，我制作了一个具有绝对位置的div，它覆盖了图像，但不透明度为0.当你将鼠标悬停在它上面时，不透明度会变为50％。但由于下拉菜单覆盖了图像，因此在尝试选择产品类别时，当将鼠标悬停在产品图像上时，下拉菜单会消失。

这是我的css代码。

#product_info
{
    position:absolute;
    background-color:#000;
    width:250px;
    height:167px;
    opacity:0.0;
    filter:alpha(opacity=0); /* For IE8 and earlier */
}

#product_info:hover
{
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

ul.dropdown, ul.dropdown ul
{
    list-style:none;
    margin:0; padding:0;
    position: relative;
}

ul.dropdown ul                      
{ 
        display:none; /*initially menu item is hidden*/
        position: absolute; /*absolute positioning is important for menu to float*/
        background-color:#fff;
        text-align: left;
        top:18px;
        width:150px;

}

/*Hover effect for menu*/
ul.dropdown li:hover  > ul      
{ 
    display:block;
}

这是我的HTML代码。 product_info div是从php函数products（）加载的。

<?php
    require 'scripts/cart.php';
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
    <head>
        <title>Streetstash - Webshop</title>

        <LINK href="stylesheets/style.css" rel="stylesheet" type="text/css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    </head>

    <body>
        <div id='navigation'><p class='nav'><a class='nav' href='/streetstash'>Forside</a> / <a class='nav' href='omkring-os.html'>Omkring os</a> / <a class='nav' href='#'>Blog</a></p></div>
        <div id='container_webshop'>
            <div id='container_about'>
                <table cellpadding="0" cellspacing="15" width="200px">
                    <tr>
                        <td colspan="3" align="center"><p class='subheader'><?php 
                        if($_GET['kategori'] == null){
                            echo "Alle produkter";
                        }else{
                            echo $_GET['kategori'];
                        }
                        ?></p></td>
                    </tr>
                    <tr>
                        <td>
                            <ul class='dropdown'>
                                <li class='header_item' >
                                    <p class='dropdown_headers'><a class='nav' href="#">Beklædning</a></p>
                                    <ul>
                                        <?php echo "
                                        <li ><p class='nav'><a class='nav' href='webshop.php?kategori=".'T-shirts'."'>T-shirts</a></p></li>
                                        <li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Sweatshirts'."'>Sweatshirts</a></p></li>
                                        <li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Hatte'."'>Hatte</a></p></li>";?>
                                    </ul>

                                </li>
                        </td>
                        <td>
                            <p class='nav'>/</p>
                        </td>
                        <td>
                            <ul class='dropdown'>
                                <li>
                                    <p class='dropdown_headers'><a class='nav' href="#">Skate</a></p>
                                    <ul>
                                        <?php echo "
                                        <li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Decks'."'>Decks</a></p></li>
                                        <li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Hjul'."'>Hjul</a></p></li>";
                                        ?>
                                    </ul>
                                </li>
                            </ul>
                        </td>
                            </ul>
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <?php products(); ?>

                </table>
            </div>
        </div>
    </body>
</html>

Answer 1

您是否尝试过使用z-index？

悬停多个项目

1 个答案: