鼠标经过文字的时候显示隐藏图片的css样式~

html-css07

鼠标经过文字的时候显示隐藏图片的css样式~,第1张

1.打开dw软件并创建一个新文档。

2.在dw中,编写以下css样式:<style>.mengsb {width:648pxmargin:0px auto}.jixing1 a {position:relativewidth:320pxmargin:0 0px 0 0float:leftheight:232px}。

3.然后将以下图像添加到正文中,代码为:<body><div class =“mengsb”>。

4.查看实时视图中的最终效果。

5,另外,你可以改变一些参数来实现不同的效果,可以改变背景颜色。

6.最后,看看改变颜色的效果。

<style>

.box {position:relative float:left width:240px height:160px margin:10px}

.box .img {width:100% height:100% background-color:#fdd}

.box .txt {display:none position:absolute top:160px width:320px height:200px background-color:#ddf z-index:2}

.box:hover .txt {display:block}

</style>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>dd</title>

<style>

    li img{

        display:none

    }

    li:hover img{

        display:block

    }

</style>

</head>

<body>

<ul>

<li>

    <div>swwwwwwww</div>

    <img src="aa.jpg" />

</li>

</ul>

</body>

</html>