鼠标放到上面会让文字显示出来
我用li包住两个a标签，图是class="a1"文字是class="a2"设置了a2display=none,怎么让鼠标放到a2的时候才会让她显示出来...
我用li包住两个a标签，图是class="a1" 文字是class="a2" 设置了a2 display=none, 怎么让鼠标放到a2的时候才会让她显示出来
展开
5个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子元素根据父元素定位显示</title>
</head>
<body>
<ul>
<li style="position:relative;">
<img id="show" style="position:absolute;display:none;" src='/pic/item/96dda144ad3459821a4b117709f431adcaef8416.jpg' />
<a id="a1" title="鼠标悬停看到的文字">鼠标悬停事件</a>
</li>
<li>
如果只是看文字就用title，一定要看图片就用这个方法父元素position:relative;
给要隐藏显示的子元素position:absolute;根据父元素定位
</li>
</ul>
<script>
window.onload = function(){
document.getElementById('a1').onmouseover = function(ev){
document.getElementById('show').style.top = this.offsetTop+"px";
document.getElementById('show').style.left = (this.offsetLeft+this.offsetWidth)+"px";
document.getElementById('show').style.display = "block";
}
document.getElementById('a1').onmouseout = function(){
document.getElementById('show').style.display = "none";
}
}
</script>
</body>
</html>
如果你只需要鼠标悬停看到文字，可以用a自带的title属性或者img的alt属性
<a title="这是你要显示的文字">超链接</a>
<img alt="鼠标悬停显示文字" src='images/3.jpg'/>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.moreimg ul li:hover .a2{
display: initial;
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
dw是吧 你添加的行为是display还是在*样式里设计的display
追问
.moreimg ul li .a2{
width:260px;
height:51px;
float:left;
margin-top: -51px;
z-index: 2;
color: #ddd;
font-size: 33px;
background-color:rgba(0,0,0,0.5);
line-height: 51px;
display:none;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以写个
li:hover .a2{display:block;}
li:hover .a2{display:block;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这必须要用到Javascript来实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
