提示框效果

最新推荐文章于 2024-07-25 11:52:08 发布

因火成烟

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量757

点赞数

文章标签： js web前端 css html 提示框效果

本文链接：https://blog.csdn.net/TheFoma/article/details/45156219

版权

html5代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提示框效果</title>
<link rel="stylesheet" href="d.css">
</head>
<body>
<div id="outer">
    <h2>名车车标展示-鼠标移过显示车标</h2>
    <ul>
        <li>
            <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>
            <img src="img/1.jpg" alt="BMW 宝马汽车" />
        </li>
        <li>
            <a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>
            <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />
        </li>
        <li>
            <a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>
            <img src="img/3.jpg" alt="Skoda 斯柯达" />
        </li>
        <li>
            <a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>
            <img src="img/4.jpg" alt="Volkswagen 大众汽车" />
        </li>
        <li>
            <a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>
            <img src="img/5.jpg" alt="Saab 萨布牌轿" />
        </li>
        <li>
            <a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>
            <img src="img/6.jpg" alt="Lamborghini 兰博基尼" />
        </li>
        <li>
            <a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>
            <img src="img/7.jpg" alt="Porsche 保时捷" />
        </li>
        <li>
            <a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>
            <img src="img/8.jpg" alt="Peugeot 标致" />
        </li>
        <li>
            <a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>
            <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />
        </li>
        <li>
            <a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>
            <img src="img/10.jpg" alt="Buick 别克汽车" />
        </li>
    </ul>
</div>
<script src="d.js"></script>
</body>
</html>

css3代码：

body,div,ul,li,h2{
	margin: 0;
	padding: 0;
}
body{
	font: 12px/1.5 Tahoma;
}
ul{
	list-style-type: none;
}
#outer{
	width: 560px;
	border: 1px solid #333;
	margin: 10px auto;
	padding:0 0 10px 10px;
}
#outer h2{
	line-height: 30px;
	text-align: center;
	margin-top: 10px;
}
#outer ul:after{
	content:"";
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
#outer ul{
	zoom: 1;
}
#outer ul li{
	position: relative;
	float: left;
	border: 1px solid #333;
	margin: 10px 10px 0 0;
	display: inline;
}
#outer ul li img{
	position: absolute;
	top: -14px;
	left: -14px;
	display: none;
	border: 2px solid #999;
	cursor: pointer;
}
#outer ul li a{
	display: block;
	width: 80px;
	height: 80px;
	color: #666;
	text-decoration: none;
	background: #f0f0f0;
	padding: 10px;
}
#outer ul li a strong{
	display: block;
}
.zindex{
	z-index: 1;
}

clear属性是是否要元素浮动；

after选择器，在标签后面加上内容；

z-index表示元素而在z轴的位置

js代码：

var oLi = document.getElementsByTagName("li");
var oImg = document.getElementsByTagName("img");
var oA = document.getElementsByTagName("a");
for(var i=0;i<oLi.length;i++)
{
//	oLi[i].index = i;
//	oLi[i].onmouseover = function (){
//		for(var j=0;j<oLi.length;j++)
//		{
//			oImg[j].style.display="none";
//			oImg[this.index].style.display="block";
//			oImg[j].className="";
//			oImg[this.index].className="zindex";
//		}
//	}
	oA[i].index = oImg[i].index = i;
	oA[i].onmouseover = function(){
		oLi[this.index].className="zindex";
		oImg[this.index].style.display="block"
	};
	oA[i].onmouseout = function (){
		oLi[this.index].className="";
		oImg[this.index].style.display="none"
	};
	oImg[i].onmouseover = function (){
		oLi[this.index].className="zindex";
		this.style.display="block"
	};
	oImg[i].onmouseout = function(){
		oLi[this.index].className="";
		this.style.display="none"
	}	
}

我用了2种方法实现；