css中div如何鼠标经过从下开始显示

html-css07

css中div如何鼠标经过从下开始显示,第1张

1.

新建html文档,在body标签中添加一个div标签,然后在div标签中添加p标签,为p标签添加内容:

2.

为了方便演示,给div标签设置宽高和背景颜色,然后给p标签设置“display”属性,属性值为“none”,这样p标签中的文字默认情况下不会显示:

3.

给div设置hover伪类,当鼠标移动到div区域时,设置p标签的样式为块级元素“block”:

4.

这样当鼠标移动到div上时就会显示p标签内容,鼠标离开就不显示p标签内容:

首先我们创建一个html文件,写出html文件的一些基础代码

然后我们在网页中新建一个div,并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件,查看效果,可以看到我们创建的标签自带有一定的格式,

接下来我们使用下面的代码去除标签的格式,其中:list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示,并且为左浮动margin-right:20px表示设置标签右外边距

刷新浏览器中html文件查看效果,

这里我们开始添加动画:

标签添加:

transition:transform 0.1s

transform表示变换的属性,0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointertransform:translate(0,-10px)}

cursor:pointer表示鼠标滑过显示为小手形状

transform:translate(0,-10px)translate表示移动,第一个参数为水平移动值,第二个参数为垂直移动值,

进入浏览器直接查看效果,如下图实现了鼠标滑过块,块上移的动画特效,如下图:

这个当然可以实现了,所谓突出显示效果跟滑动门的道理差不多,需要用到的是:hover

********************************************************

定义和用法

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:

********************************************************

我不清楚你说的突出显示的效果,是不是图片变大。

如果是那样的话,可以<img class="big">先定义一下,然后之后img.big:hover {width:多少pxheight:多少px}

就是把它置为顶层就可以了。具体的浮动什么的,依情况而定,写CSS熟悉以后很简单。

或者我觉得直接就可以用滑动门的办法,用两张图来替换就行。

<div id="header">

<ul>

<li><a href="#">Home</a></li>

<li id="current"><a href="#">News</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

#header {

float:left

width:100%

background:yellow

font-size:93%

line-height:normal

}

#header ul {

margin:0

padding:0

list-style:none

}

#header li {

float:left

margin:0

padding:0

}

#header a {

display:block

}

#header li {

float:left

background:url("norm_right.gif")

no-repeat right top

margin:0

padding:0

}

#header a {

display:block

background:url("norm_left.gif")

no-repeat left top

padding:5px 15px

}

#header #current {

background-image:url("norm_right_on.gif")

}

#header #current a {

background-image:url("norm_left_on.gif")

}

嗯,你现在网上看一下滑动门的文章吧,我说的也不是很清楚,只是提供了一个思路,具体的看几个网页模板的代码相应的部分就可以理解了,嗯希望对你有帮助吧。