html - li:将鼠标悬停在div上显示背景图片(小三 Angular 形)

项目：http://development.legendarylion.com/

网站正在开发中。试图让.png出现在节目中的子div上。已经尝试调整z-index，没有效果。

目标：使.png出现在悬停时并定位，将其作为指针出现在悬停时的黑色子div上方。

有什么建议吗？

的CSS

#menu li.drop:hover {
background-image:url('../img/style/notch.png');background-position:50% 110%;background-repeat:no-repeat;z-index:600;background-position:absolute;}

的HTML

<ul id="menu" >
           <li class="drop"><a id="menu-anchor-point"  class="uppercase" href="#">Armor</a>
            <div class="dropdown_5columns">
            <!--img class="armor-thumb left" src="img/armor-icons/blueprint.jpg" alt="">
                <div class="col_2">
                </div>
                <div class="col_1">
                <h2>Soft</h2>
                </div>
                <div class="col_1">
                <h2>Hard</h2>
                </div>
                <div class="col_1">
                <h2>Structured</h2>-->
                <p class="description"><small></small>Armor comes in different configurations... Here is what to expect when selecting your armor and a list of our armor...</small></p>
                <h2>Soft</h2>
                <h2>Hard</h2>
                <h2>Structured</h2>
                </div>
           </li>
           <li class="drop"><a class="uppercase" href="#">Concealable</a>
           <div class="dropdown_5columns">
                <img class="armor-thumb left" src="img/armor-icons/concealable.jpg" alt="">
                <img class="vertical-hr" src="img/vertical-hr.png">
                <div class="col_2">
                <h3>Male</h3>
                <hr class="menu-hr">
                <p>Revolution</p>
                <p>Evolution</p>
                <p>Equinox</p>
                <p>Lo-Pro</p>
            </div>
            <div class="col_2">
                <h3>Female</h3>
                <hr class="menu-hr">
                <p>Revolution</p>
                <p>Evolution</p>
                <p>Equinox</p>
                <p>Lo-Pro</p>
            </div>
                <div class="right">
                <img class="armor-icon right" src="img/armor-icons/concealable.png" alt="">
                </div>
           </li>
           <li class="drop"><a class="uppercase" href="#">Overt</a>
            <div class="dropdown_5columns">
            <img class="armor-thumb left" src="img/armor-icons/overt.jpg" alt="">
            <img class="vertical-hr" src="img/vertical-hr.png">
                <div class="col_2">
                <h3>Carriers</h3>
                <hr class="menu-hr">
                <p>Quilted Carrier System (QCS)</p>
                <p>Blauer Armorskin&trade;</p>
                <p>AE Dress Vest</p>
                <p>Overt Carrier System (OCS)</p>
                <p>Med Vest</p>
                <p>Instructor Vest</p>
                </div>
                <div class="col_2">
                <h3>Accessories</h3>
                <hr class="menu-hr">
                <p>Med Vest</p>
                </div>
                <div class="right">
                <img class="armor-icon right" src="img/armor-icons/overt.png" alt="">
                </div>
           </li>
           <li class="drop"><a class="uppercase" href="#">Tactical</a>
            <div class="dropdown_5columns">
                <img class="armor-thumb left" src="img/armor-icons/tactical.jpg" alt="">
                <img class="vertical-hr" src="img/vertical-hr.png">
                <div class="col_2">
                <h3>Carriers</h3>
                <hr class="menu-hr">
                <p>Lighthawk Series</p>
                <p>Wolverine</p>
                <p>Hard Core DM</p>
                <p>K-9</p>
                </div>
                <div class="col_2">
                <h3>Accessories</h3>
                <hr class="menu-hr">
                <p>Lighthawk Accessories</p>
                <p>Pouches</p>
                <p>Hard Armor</p>
                <p>Shields</p>
                <p>Blankets</p>
                <p>Helments & Face Shields</p>
                </div>
                <div class="right">
                <img class="armor-icon right" src="img/armor-icons/tactical.png" alt="">
                </div>
           </li>
           <li><a class="uppercase" href="#">Contact</a>
           </li>
        </ul>
    </div><!--header-->
        <div id="slideshow">
            <ul id="nav">
                <li id="next"><a href="#">next</a></li>
                <li id="prev"><a href="#">prev</a></li>
            </ul>
            <ul id="slides">
                <li><img src="img/slider-1.jpg" title="" alt="1"></li>
                <li><img src="img/slider-2.jpg" title="" alt="2"></li>
                <li><img src="img/slider-3.jpg" title="" alt="3"></li>
            </ul>

最佳答案

您需要在anchor元素上执行此操作：

#menu li.drop:hover a{
       background:url('../img/style/notch.png') no-repeat bottom center;
       position: relative;
       z-index: 5000;
}

关于html - li:将鼠标悬停在div上显示背景图片(小三 Angular 形)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12848701/