0
我在悬停列表元素时遇到了问题。在悬停列表的元素上显示其他div
我想显示另一个div,如果我悬停“li”元素。
这是链接到我的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;
}
你不能用CSS因为你的目标不是兄弟姐妹或后代。你必须使用JavaScript。 – j08691
当前HTML结构不可能。你需要JS。 –