徘徊多個項目

所以我正在爲我的公司做一個網上商店，我做了一個下拉菜單來選擇不同種類的產品類別。我的產品在下拉菜單下方列出，下拉菜單本身覆蓋不同的產品圖像。我的想法是能夠將鼠標懸停在產品圖像上，以便能夠查看有關產品的某些信息。爲了達到這個目的，我製作了一個絕對位置覆蓋圖像但不透明度爲0的div。當您將鼠標懸停在其上時，不透明度會變爲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>

來源

2013-02-07 Thobias Nordgaard

您是否嘗試過使用z-index？

來源

2013-02-07 21:27:16

徘徊多個項目

回答

相關問題