鼠标经过切换选项卡怎么做，鼠标离开不隐藏，_html/css

首页

web前端

html教程

鼠标经过切换选项卡怎么做，鼠标离开不隐藏，_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:24 PM

不是那种导航，导航做法的鼠标离开后内容就隐藏了。鼠标离开后内容不隐藏，我说这种就像百度知道下面的这个

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

区别是不用点击

回复讨论(解决方案)

xx:hover{display:block}

楼上说的情况鼠标离开后block又没了

你把 onclick 事件换成 mousemove 事件就可以了

你把 onclick 事件换成 mousemove 事件就可以了
写错了换成 mouseover事件

        <!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>            <li>[讨论] 关于CSS样式的书写顺序 </li>        </ul>        <ul>         <li>[讨论] border老技巧书写的倒三角[仅供参考] 2</li>            <li>[求助] 关于 Joomla 生成的 CSS</li>            <li>[求助] css分隔线用什么好？ </li>            <li>[求助] 一行两列显示时内容被截断了，该怎么办？ </li>            <li>[讨论] 中英文混排时underline出现的问题</li>            <li>[讨论] 关于CSS样式的书写顺序 </li>        </ul>        <ul>         <li>[讨论] border老技巧书写的倒三角[仅供参考] 3</li>            <li>[求助] 关于 Joomla 生成的 CSS</li>            <li>[求助] css分隔线用什么好？ </li>            <li>[求助] 一行两列显示时内容被截断了，该怎么办？ </li>            <li>[讨论] 中英文混排时underline出现的问题</li>            <li>[讨论] 关于CSS样式的书写顺序 </li>        </ul>        <ul>         <li>[讨论] border老技巧书写的倒三角[仅供参考] 4</li>            <li>[求助] 关于 Joomla 生成的 CSS</li>            <li>[求助] css分隔线用什么好？ </li>            <li>[求助] 一行两列显示时内容被截断了，该怎么办？ </li>            <li>[讨论] 中英文混排时underline出现的问题</li>            <li>[讨论] 关于CSS样式的书写顺序 </li>        </ul>    </div></div><script type="text/javascript"> var lis = document.getElementById("Tabs").getElementsByTagName("li"); var uls = document.getElementById("TabsCon").getElementsByTagName("ul"); var order = 0; for(var i=0; i<lis.length; i++){  lis[i].value = i;  lis[i].onmouseover = function(){   ChangeTabs(this.value);   };  uls[i].className = "hidden"; } lis[order].className = "cur"; uls[order].className = "block"; function ChangeTabs(nowTab){  lis[order].className = "";  uls[order].className = "hidden";  order = nowTab  lis[nowTab].className = "cur";  uls[nowTab].className = "block"; }</script></body></html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，