本效果通过纯CSS实现，无需JS代码，鼠标滑过数字时，电视机自动换台，非常好的效果
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<style type="text/css">
#container {width:224px; height:220px; margin:100px auto; position:relative;}
#case {width:200px; height:120px; border-top:4px solid #cecece; border-right:12px solid #9b9b9b; border-
bottom:6px solid #969696; border-left:12px solid #cacaca; background:#e8e8e8; position:relative;}
#tvtop {width:120px; height:2px; border-left:10px solid #efefef; border-right:10px solid #efefef;
background:#adadad; position:absolute; top:-3px; left:30px; overflow:hidden;}
#tvbot {width:50px; height:3px; border-left:45px solid #ddd; border-right:45px solid #ddd; background:#aaa;
position:absolute; bottom:-4px; left:30px; overflow:hidden;}
#stand2 {width:100px; height:6px; border-bottom:6px solid #969696; border-right:1px solid #9b9b9b; border-
left:1px solid #9b9b9b; background:#ddd; position:absolute; bottom:-30px; left:48px; overflow:hidden;}
#stand {width:50px; height:15px; background:#888; position:absolute; bottom:-21px; left:75px;
overflow:hidden;}
#tvscreen {width:170px; height:100px; border:4px solid #666; background:#08c; position:absolute; top:6px;
left:10px; overflow:hidden; text-align:center; line-height:100px; color:#ff0}
#tvmenu {position:absolute; top:170px; left:50px; width:200px; height:100px; font-family:"courier new",
monospace;}
#tvmenu:hover {background:transparent;}
#tvmenu a:visited {color:#fff; text-decoration:none; font-size:14px; background:#000;}
#tvmenu a {color:#fff; text-decoration:none; font-size:14px; background:#000;}
#tvmenu a span {display:none; width:0; height:0; position:absolute; border:0;}
#tvmenu a div {display:none;}
#tvmenu a:hover {color:#fff; background:#c00; text-decoration:none;}
#tvmenu a img {display:block; position:absolute; top:-84px; left:38px; width:0; height:0; border:0;}
#tvmenu a:hover img {display:block; position:absolute; top:-155px; left:-24px; width:170px; height:100px;
border:0;}
#tvmenu a:hover .line {display:block; position:absolute; top:25px; left:0px; width:15px; height:2px;
overflow:hidden; background:#c00;}
#tvmenu a:hover .line1 {display:block; position:absolute; top:25px; left:0px; width:35px; height:2px;
overflow:hidden; background:#c00;}
#tvmenu a:hover .line2 {display:block; position:absolute; top:25px; left:0px; width:60px; height:2px;
overflow:hidden; background:#c00;}
#tvmenu a:hover .line3 {display:block; position:absolute; top:25px; left:0px; width:85px; height:2px;
overflow:hidden; background:#c00;}
#tvmenu a:hover .line4 {display:block; position:absolute; top:25px; left:0px; width:110px; height:2px;
overflow:hidden; background:#c00;}
#tvmenu a:hover .point {display:block; position:absolute; top:20px; left:5px; width:0; height:0;
overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point1 {display:block; position:absolute; top:20px; left:25px; width:0; height:0;
overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point2 {display:block; position:absolute; top:20px; left:50px; width:0; height:0;
overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point3 {display:block; position:absolute; top:20px; left:75px; width:0; height:0;
overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point4 {display:block; position:absolute; top:20px; left:100px; width:0; height:0;
overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
.channel {position:absolute;top:200px; left:52px; font-size:14px; font-weight:bold; color:#000; letter-
spacing:10px;}
</style>
在网页<body>区添加以下代码
<div id="container"> <div id="case"> <div id="tvtop"></div> <div id="tvbot"></div> <div id="stand2"></div> <div id="stand"></div> <div id="tvscreen">MyTV</div> </div> <div id="tvmenu"> <a href="http://www.sharejs.com"> 1 <img src="men1.jpg" alt="" /><span class="line">.</span><span class="point">.</span></a><a href="http://www.sharejs.com"> 2 <img src="men2.jpg" alt="" /><span class="line1">.</span><span class="point1">.</span></a><a href="http://www.sharejs.com"> 3 <img src="men3.jpg" alt="" /><span class="line2">.</span><span class="point2">.</span></a><a href="http://www.sharejs.com"> 4 <img src="men4.jpg" alt="" /><span class="line3">.</span><span class="point3">.</span></a><a href="http://www.sharejs.com"> 5 <img src="men5.jpg" alt="" /><span class="line4">.</span><span class="point4">.</span></a> </div> <div class="channel">channel</div> </div>
