css可以做出鼠标滑过图片突出显示的效果么?在电子杂志上看到过,觉得很好看。可是网页上能实现吗?

html-css07

css可以做出鼠标滑过图片突出显示的效果么?在电子杂志上看到过,觉得很好看。可是网页上能实现吗?,第1张

这个当然可以实现了,所谓突出显示效果跟滑动门的道理差不多,需要用到的是: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")

}

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

这个简单,给DIV层加上边框阴影就可以了

给CSS加上这个box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2)就行了,你可以百度一下我的网名,我的站里用了很多这种效果,应该就是你所说的凸出来的效果。