• 新记

    • CSS鼠标滑过内容切换的代码

    最近网上盛行一种代码，如 http://www.163.com/ 等一些大网站都会用到的一种效果，简单点说就是鼠标一滑过内容就自动切换，这样很节省版面，内容也可以放的更多……但是本人对于这个代码不熟悉，希望得到高手的指点，本人将感激不尽！

    举报该文章
    相关建议   推荐于2016-06-09
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <style>
    /*为什么要这样定义样式，而不用#cardBar ul 这样定义，我个人的猜测是因为类是就近原则获取样式，而#cardBar ul则不是就近原则，按标签来定义，因此.Selected样式就无法出现。*/
    *{
    margin:0px;
    padding:0px;
    text-decoration:none;
    }
    /*定义基本样式*/
    ul.cardUl{
    font-size:12px;
    list-style-type:none;
    text-align:center;
    height:29px;
    background-image:url(attachments/month_0706/2200764172315.gif);
    }
    /*默认样式下使用css文件*/
    ul.cardUl li{
    height:29px;
    background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
    float:left;
    margin-right:1px;
    padding-left:6px; /*另一边提供空间*/
    }
    ul.cardUl li a{
    float:left;
    height:29px;
    background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
    display:block;
    padding:8px 8px 3px 4px;/*让文字能够够居中*/
    color:#333;
    white-space: nowrap;
    }
    /*文字点击使用CSS*/
    ul.cardUl li.Selected{
    background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
    }
    ul.cardUl li.Selected a{
    background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
    }
    /*对点击下栏显示边框的代码进行美化*/
    div.hackBox{
    padding:2px 2px;
    border-left:2px solid #6697CD;
    border-right:2px solid #6697CD;
    border-bottom:2px solid #6697CD;
    display:none;
    }
    </style>
    <script>
    //为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
    function loadTab(){
    //读取cardBar下面所有li标签
    var getId=document.getElementById("cardBar").getElementsByTagName("li");
    //定义一个判断是否有selected的变量
    var selectedItems=0;
    //判断方法，循环读出li标签的className，如果有则selectedItems加1
    for(i=0;i<getId.length;i++){
    if (getId[i].className == "Selected"){
    selectedItems+=1;
    }
    }
    //经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
    if (selectedItems==0){
    document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
    document.getElementById("Dcard1").style.display="block";
    }
    }
    //让窗口打开就运行他
    window.onload=loadTab;
    //设定结束

    //进行选项卡效果的触发
    function switchTab(cardBar,cardId){
    //读取cardBar下面所有li标签
    var oItems = document.getElementById(cardBar).getElementsByTagName("li");
    //循环清空li标签下面的selected效果
    for (i=0;i<oItems.length;i++ ){
    var x=oItems[i];
    x.className="";
    var y=x.getElementsByTagName("a");
    y[0].style.color="#333";
    }
    //开始选项卡效果的赋值，为选中的li标签增加selected类的属性
    document.getElementById(cardId).className="Selected";
    //读出cardContent 下面的所有div标签
    var dvs=document.getElementById("cardContent").getElementsByTagName("div");
    //循环，判断应该显示的div
    for (i=0;i<dvs.length;i++ ){
    if (dvs[i].id==("D"+cardId)){
    dvs[i].style.display="block";
    }else{
    dvs[i].style.display="none";
    }
    }
    }
    </script>
    <BODY>
    <div id="aa">
    <ul class="cardUl" id="cardBar">
    <li id="card1"><a href="#" onclick="javascript:switchTab('cardBar','card1');">第一选项</a></li>
    <li id="card2"><a href="#" onclick="javascript:switchTab('cardBar','card2');">第二选项</a></li>
    <li id="card3"><a href="#" onclick="javascript:switchTab('cardBar','card3');">第三选项</a></li>
    <li id="card4"><a href="#" onclick="javascript:switchTab('cardBar','card4');">第四选项</a></li>
    </ul>
    <div id="cardContent">
    <div id="Dcard1" class="hackBox">代码一</div>
    <div id="Dcard2" class="hackBox"">代码二</div>
    <div id="Dcard3" class="hackBox">代码三</div>
    <div id="Dcard4" class="hackBox">代码四</div>
    </div>
    </div>
    </BODY>
    </HTML>
    温馨提示：内容为网友见解，仅供参考
    其他看法
    第1个回答  2007-10-23
    <TITLE></TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>
    <style>
    /*为什么要这样定义样式，而不用#cardBar ul 这样定义，我个人的猜测是因为类是就近原则获取样式，而#cardBar ul则不是就近原则，按标签来定义，因此.Selected样式就无法出现。*/
    *{
    margin:0px;
    padding:0px;
    text-decoration:none;
    }
    /*定义基本样式*/
    ul.cardUl{
    font-size:12px;
    list-style-type:none;
    text-align:center;
    height:29px;
    background-image:url(attachments/month_0706/2200764172315.gif);
    }
    /*默认样式下使用css文件*/
    ul.cardUl li{
    height:29px;
    background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
    float:left;
    margin-right:1px;
    padding-left:6px; /*另一边提供空间*/
    }
    ul.cardUl li a{
    float:left;
    height:29px;
    background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
    display:block;
    padding:8px 8px 3px 4px;/*让文字能够够居中*/
    color:#333;
    white-space: nowrap;
    }
    /*文字点击使用CSS*/
    ul.cardUl li.Selected{
    background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
    }
    ul.cardUl li.Selected a{
    background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
    }
    /*对点击下栏显示边框的代码进行美化*/
    div.hackBox{
    padding:2px 2px;
    border-left:2px solid #6697CD;
    border-right:2px solid #6697CD;
    border-bottom:2px solid #6697CD;
    display:none;
    }
    </style>
    <script>
    //为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
    function loadTab(){
    //读取cardBar下面所有li标签
    var getId=document.getElementById("cardBar").getElementsByTagName("li");
    //定义一个判断是否有selected的变量
    var selectedItems=0;
    //判断方法，循环读出li标签的className，如果有则selectedItems加1
    for(i=0;i<getId.length;i++){
    if (getId[i].className == "Selected"){
    selectedItems+=1;
    }
    }
    //经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
    if (selectedItems==0){
    document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
    document.getElementById("Dcard1").style.display="block";
    }
    }
    //让窗口打开就运行他
    window.onload=loadTab;
    //设定结束

    //进行选项卡效果的触发
    function switchTab(cardBar,cardId){
    //读取cardBar下面所有li标签
    var oItems = document.getElementById(cardBar).getElementsByTagName("li");
    //循环清空li标签下面的selected效果
    for (i=0;i<oItems.length;i++ ){
    var x=oItems[i];
    x.className="";
    var y=x.getElementsByTagName("a");
    y[0].style.color="#333";
    }
    //开始选项卡效果的赋值，为选中的li标签增加selected类的属性
    document.getElementById(cardId).className="Selected";
    //读出cardContent 下面的所有div标签
    var dvs=document.getElementById("cardContent").getElementsByTagName("div");
    //循环，判断应该显示的div
    for (i=0;i<dvs.length;i++ ){
    if (dvs[i].id==("D"+cardId)){
    dvs[i].style.display="block";
    }else{
    dvs[i].style.display="none";
    }
    }
    }
    </script>
    <BODY>
    <div id="aa">
    <ul class="cardUl" id="cardBar">
    <li id="card1"><a href="#" onclick="javascript:switchTab('cardBar','card1');">第一选项</a></li>
    <li id="card2"><a href="#" onclick="javascript:switchTab('cardBar','card2');">第二选项</a></li>
    <li id="card3"><a href="#" onclick="javascript:switchTab('cardBar','card3');">第三选项</a></li>
    <li id="card4"><a href="#" onclick="javascript:switchTab('cardBar','card4');">第四选项</a></li>
    </ul>
    <div id="cardContent">
    <div id="Dcard1" class="hackBox">代码一</div>
    <div id="Dcard2" class="hackBox"">代码二</div>
    <div id="Dcard3" class="hackBox">代码三</div>
    <div id="Dcard4" class="hackBox">代码四</div>
    </div>
    </div>
    </BODY>
    </HTML>

    html鼠标悬停改变文字css实现鼠标滑过改变文字的方法
    html鼠标悬停改变文字，css实现鼠标滑过改变文字的方法很多人还不知道，现在让我们一起来看看吧！代码如下:Menu { width:500px;margin:50px auto;border:1px solid #CCC;overflow:hidden;} Menu ul { margin:0;padding:0;list-style:none;} Menu li { width:100px;height:22px;line-height:22px;...

    如何设置鼠标滑过文字时文字背景改变?
    在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。 如图 代码： style type="text\/css" .bg{ width: 150px; height: 150px; background-color: red; } \/style 设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背...

    CSS或者HTML里如何实现鼠标移上去换文字的效果?
    CSS里面可以实现，不过很麻烦，要考虑浏览器兼容问题什么的。可以用js实现啊，代码如下:--- a{ text-decoration:none;color:black;font-size:12px;} 首页| 关于卓纳| 作品| 服务| 联系卓纳 var as=document.getElementsByTagName('a');for(i=0;i<as...

    js css 鼠标移入某个区域滑出一个框的效果怎么做?
    1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。4、...

    css+div html 鼠标滑过div里的内容变样式?
    1、先在找个文件夹创建文件index.html。2、然后用能编辑文本文件的软件打开index.html，index.html的初始内容如图。3、接着编写两个样式作为鼠标移动时div修改的样式。4、然后编写js代码修改div的样式。5、编辑完index.html后保存，在浏览器中打开index.html。效果如图。鼠标移入移出div时，div的样式改变...

    鼠标移过去 中英文切换的导航栏css代码
    li {float:left;margin-right:25px;padding:5px} .active {background-color:red} .hover {background-color:blue;color:white} .normal {background-color:white;color:black} 首页 二页 三页 ul> var navbar=document.getElementById("navbar");var items=navbar.getElementsByTagName(...

    鼠标经过文字变色代码说明
    鼠标经过文字变色的代码使用CSS中的:hover伪类选择器。允许开发者在鼠标悬停在指定元素上时应用特定的样式。在给定的例子中，A:hover{font-weight:bold;color:#cc99ff}表示当鼠标悬停在链接元素上时，应用的样式是加粗字体和紫色文本颜色。这种效果可以增加网页的交互性和视觉吸引力，提供一种视觉反馈，...

    如何实现鼠标滑过整行变色
    this.className += ' hover';是给当前TR元素追加一个样式定义,因为class属性中可以有多个用空格分隔的值,所以,为了不将其原有的样式覆盖,这里是通过+=进行追加,也就是想当于this.className = thisclassName + ' hover';这里定义的样式名与伪类同名,但在CSS样式定义中使用的是点号,说明它是样式名而...

    CSS鼠标经过图片变亮,移开变变暗效果代码怎么写
    1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：3、打开浏览器，在浏览器内查看效果：4、将鼠标移入图片，就会发现图片已经变亮了...

    鼠标移动上去使字体变色,这代码怎么写
    鼠标滑过字体变色是一种常见的效果，制作鼠标滑过字体变色，可以通过css提供了鼠标滑过hover选择器对样式进行修改。操作步骤如下：1、首先打开html开发工具，创建一个html文件。2、在html页面找到标签，在标签里面输入内容，然后用标签把内容覆盖。3、修改标签的内容设置颜色为蓝色。4、保存好html文件，使用浏...

    相似回答
    大家正在搜
    相关问题
    CSS，div鼠标滑过切换的代码（只要纯CSS代码，最好不好...
    一个css样式问题，鼠标滑过标题，自动切换下面内容的
    用css+div 做鼠标 鼠标经过 内容变幻的效果 要代码
    求：用CSS写鼠标经过改变内容的代码 要祥细说明！
    如何实现鼠标经过时切换CSS样式 详细�0&#...
    怎么实现css实现鼠标滑过改变文字
    怎样实现鼠标悬停时图片的切换？ CSS代码。
    TAb里的标签怎么用css把鼠标点击切换变成鼠标经过切换？