css代码怎么切换图层

html-css09

css代码怎么切换图层,第1张

问题可以再详细些吗，别人才好回答你。

你的问题是不是实现一个图层两个图片连续切换，或者说是切换选项卡功能。这些得结合javascript。有些时候利用a:hover也可以做一些类似的功能。

CSS能更换的图片，只能存在于样式中。所以，这个图片也只能是背景图片。

一般是结合：hover来实现的。例如：

.mydiv{

background:图片1  no-repeat

height:100px

widht:100px

}

.mydiv:hover{

background:图片2  no-repeat

}

这样就实现了图片1和图片2的鼠标移上去的切换。

CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1、利用css的:hover

<div id="content">  

    这是原本的div层  

    <div id="show">  

        <p>这是鼠标移动上去后的div层</p>  

    </div>  

</div> 

<style type="text/css">  

        *{  

            margin: 0  

            padding: 0  

        }  

        #content{  

            background:#0CF  

            height:200px  

            width:200px  

            margin-left: 20px  

            margin-top: 20px  

        }  

        #show{  

            width:200px  

            height:200px  

            margin-top: 20px  

            background:#F09  

            top:0px  

            position:absolute  

            opacity: 0  

            display: block  

            font-size: 12px  

            transition: 0.3s  

            -webkit-transition: .5s  

            -moz-transition: .5s  

        }  

        #content:hover #show{  

            color: #656e73  

            opacity: 1  

        }  

    </style>