鼠标经过切换选项卡如何做，鼠标离开不隐藏-HTML教程-爱易网页

鼠标经过切换选项卡如何做，鼠标离开不隐藏

日期：2014-05-16　浏览次数：20790 次

鼠标经过切换选项卡怎么做，鼠标离开不隐藏，
不是那种导航，导航做法的鼠标离开后内容就隐藏了。鼠标离开后内容不隐藏，我说这种就像百度知道下面的这个

一直有内容显示，只是鼠标划过一个标题，对应的内容就会显示，也有些像论坛里的这个

区别是不用点击

------解决方案--------------------
你把 onclick 事件换成 mousemove 事件就可以了
------解决方案--------------------



        <!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>

<style type="text/css">

*{ margin:0; padding:0; font-size:12px;}

body{

 padding:30px;

}

.tabsBox{ width:400px; margin:20px auto;}

.tabs{ height:20px;}

.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#3cc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#fff;}

.tabs li span{ display:none;}

.tabs .cur{ background-color:#333;}

.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#333 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}

.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #333; position:relative; z-index:1;}

.cons ul li{ list-style:none; line-height:20px;}

.hidden{ display:none;}

.block{ display:block;}

</style>

</head>

<body>

<div class="tabsBox">

 <ul id="Tabs" class="tabs">

     <li class="cur">国内新闻<span></span></li>

     <li>国际新闻<span></span></li>

     <li>社会新闻<span></span></li>

     <li>娱乐新闻<span></span></li>

    </ul>

    <div id="TabsCon" class="cons">

     <ul>

         <li>[讨论] border老技巧书写的倒三角[仅供参考]1 </li>

            <li>[求助] 关于 Joomla 生成的 CSS</li>

            <li>[求助] css分隔线用什么好？ </li>

            <li>[求助] 一行两列显示时内容被截断了，该怎么办？ </li>

            <li>[讨论] 中英文混排时underline出现的问题</li>

   &n

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

鼠标经过切换选项卡如何做，鼠标离开不隐藏

相关资料更多>

推荐阅读更多>