鼠标放到上面会让文字显示出来
发布网友
共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属性
<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;}
热心网友
这必须要用到Javascript来实现
