Question

我将鼠标悬停在列表元素上会出现问题。

我想展示另一个div，如果我徘徊在＆＃34; li＆＃34;元件。

这是我链接到我的HTML代码：

<ul id="color_to_pick_list" class="clearfix">
<li id="hover_2" class="selected hover_2"> <a href="http://technicolor.pl/shop_v2/aixam-city/32-aixam-city-hatchback-2003-2010.html" id="color_2" name="Przejrzystość folii 5%" class="color_pick selected" title="Przejrzystość folii 5%"> <img src="http://technicolor.pl/shop_v2/img/co/2.jpg" alt="Przejrzystość folii 5%" title="Przejrzystość folii 5%" width="20" height="20" > </a></li>
<li id="hover_5"> <a href="http://technicolor.pl/shop_v2/aixam-city/32-aixam-city-hatchback-2003-2010.html" id="color_5" name="Przejrzystość folii 20%" class="color_pick" title="Przejrzystość folii 20%"> <img src="http://technicolor.pl/shop_v2/img/co/5.jpg" alt="Przejrzystość folii 20%" title="Przejrzystość folii 20%" width="20" height="20"> </a></li><li id="hover_6"> <a href="http://technicolor.pl/shop_v2/aixam-city/32-aixam-city-hatchback-2003-2010.html" id="color_6" name="Przejrzystość folii 35%" class="color_pick" title="Przejrzystość folii 35%"> <img src="http://technicolor.pl/shop_v2/img/co/6.jpg" alt="Przejrzystość folii 35%" title="Przejrzystość folii 35%" width="20" height="20"> </a></li></ul>



    <div id="color_2_tooltip"><p id="tooltip_color_2"><img src="http://technicolor.pl/shop_v2/img/cms/5.jpg" width="240" /></p></div>
  <div id="color_5_tooltip"><p id="tooltip_color_5"><img src="http://technicolor.pl/shop_v2/img/cms/20.jpg" width="240" /></p></div>
  <div id="color_6_tooltip"><p id="tooltip_color_6"><img src="http://technicolor.pl/shop_v2/img/cms/35.jpg" width="240" /></p></div>

这是CSS代码：

#color_2, 
    #color_5, 
    #color_6{
        display:block;
    }
    ul li.hover_2:hover~#color_2_tooltip,
    #color_5:hover~#color_5_tooltip, 
    #color_6:hover~#color_6_tooltip {
        display:block;
    }
ul li.hover_2:hover~#color_2_tooltip #tooltip_color_2, 
    #color_5:hover~#color_5_tooltip #tooltip_color_5, 
    #color_6:hover~#color_6_tooltip #tooltip_color_6{  
    position:absolute;
    bottom:0;
    top:0;
    left:140px;
    right:0;    
    }


    #color_2_tooltip, 
    #color_5_tooltip, 
    #color_6_tooltip {
        display:none;
    }

Answer 1

尝试这样的事情：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QQIndex</title>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <style>
        #color_2,
        #color_5,
        #color_6 {
            display: block;
        }

        #color_2_tooltip,
        #color_5_tooltip,
        #color_6_tooltip {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".hover")
            .mouseover(function () {
                $(":first", this).show();
            })
            .mouseout(function () {
                $(":first", this).hide();
            });
        })
    </script>
</head>
<body>
    <ul id="color_to_pick_list" class="clearfix">
        <li id="hover_2" class="selected hover_2 hover">
            <div id="color_2_tooltip">
                <p id="tooltip_color_2">
                    <img src="~/Images/orderedList3.png" width="240" />
                </p>
            </div>
            <a href="http://www.microsoft.com" id="color_2" name="Przejrzystość folii 5%" class="color_pick selected"
               title="Przejrzystość folii 5%">
                <img src="~/Images/orderedList0.png" alt="Przejrzystość folii 5%" title="Przejrzystość folii 5%"
                     width="120" height="120">
            </a>
        </li>
        <li id="hover_5" class="hover">
            <div id="color_5_tooltip">
                <p id="tooltip_color_5">
                    <img src="~/Images/orderedList4.png" width="240" />
                </p>
            </div>
            <a href="http://www.microsoft.com" id="color_5" name="Przejrzystość folii 20%" class="color_pick"
               title="Przejrzystość folii 20%">
                <img src="~/Images/orderedList1.png" alt="Przejrzystość folii 20%" title="Przejrzystość folii 20%"
                     width="120" height="120">
            </a>
        </li>
        <li id="hover_6" class="hover">
            <div id="color_6_tooltip">
                <p id="tooltip_color_6">
                    <img src="~/Images/orderedList5.png" width="240" />
                </p>
            </div>
            <a href="http://www.microsoft.com" id="color_6" name="Przejrzystość folii 35%" class="color_pick"
               title="Przejrzystość folii 35%">
                <img src="~/Images/orderedList2.png" alt="Przejrzystość folii 35%" title="Przejrzystość folii 35%"
                     width="120" height="120">
            </a>
        </li>
    </ul>
</body>
</html>

在悬停列表的元素上显示其他div

1 个答案: