如何在鼠标悬停时显示图像 [英] how to show the image while mouse over li

问题描述

在下面的代码中，当老鼠的房子通常在最后一个ul处徘徊时，我能够在类'.location1'中显示图像。实际上我想在类'location1'中显示图像，只有当鼠标悬停在'位置'文本上时才会发送文件li id ='smap'。

In the following code I am able to show the image in class '.location1' when the mouse house hovers commonly at the last ul. Actually I want to show the image in class 'location1' , only when the mouse hovers on 'location' text li id='smap'.

.imageBox1 ul li ul .location1
{
 display:none;

}
.imageBox1 ul li ul:hover>.location1
{
display:block;
position:absolute;

}

<div class="imageBox1">
 <ul>
 <li class="img1"><img src="apt1.jpg" /><br>
 <span style="font-size:large; text-align:center; font-weight:bold;">Vasans Riveria-RS Puram</span>
  <ul>
 <li id="smap"><a href="#" > <span style="color:Silver;  ">Location</span></a></li>
 <li class="location1"><img src="twobhksitemap.jpg"  style=" width:120px; background-color:Blue"/></li>
 <li><a href="two_bhk_floorplan.aspx"<span style="color:Silver;">2 bhk plan</span></a></li>

...

...

推荐答案

在CSS中使用属性选择器： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors [ ^ ]

Use attribute selectors in your CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors[^]

.imageBox1 ul li[id="smap"] ul .location1

这篇关于如何在鼠标悬停时显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！