鼠标移至此处, 背景变化的CSS例子
保存格式以jsp或者是 html 都可以
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<body>
<style type="text/css">
a{text-decoration:none; background:red; color:yellow}
a:hover{text-decoration:line-through; background:black}
h1{text-align:center; font-weight:900;
border-style:ridge; border-width:medium; border-color:red}
p.first{font-size:15; font-face:楷体;
color:blue; border-style:dotted;
border-width:thin; border-color:blue}
p.second{font-size:20; word-spacing:10; background:aqua}
</style>
</head>
<h1> 带连框的题头1 </h1>
<a href=mailto:webmaster@webjx.com?subject=CSS >
鼠标移至此处, 背景变化
</a>
<p> 未加CSS修饰的段落 </p>
<p class=first> 指定CSS修饰的段落 </p>
<p class=second> 指定另一种CSS修饰的段落 </p>
</body>
</html>
运行结果请查看附件
分享到：
相关推荐
在CSS3中，我们可以利用:hover伪类来实现鼠标悬停时元素背景的动态效果，比如鼠标指向时背景放大，移开时缩小。这种效果在网页设计中常用于按钮、链接或者图片，为用户提供更丰富的交互体验。下面我们将详细介绍如何...
在本案例中，“CSS鼠标移上去显示大图”是指通过CSS实现了一个交互效果：当鼠标悬停在小图片上时，会显示一个放大版的大图。这种功能常见于产品展示、相册浏览等场景，可以提升用户体验，让用户更清晰地查看细节。 ...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标移入时的翻转效果。这种效果能够增加用户与页面的互动性，使信息展示更加生动有趣。本文将详细介绍如何利用CSS3...
要实现鼠标悬停时背景色变化，可以使用`:hover`伪类选择器。例如： ```css /* 在你的CSS文件或标签内 */ div:hover { background-color: #ff0000; /* 鼠标悬停时的背景色，这里设为红色 */ } ``` 这段代码告诉...
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none;... background:url(/article/upimages/bbs_bg_off.gif);...
在CSS3中，鼠标移入样式变化过渡效果是通过一系列技术实现的，这些技术极大地增强了网页的用户体验，使得用户交互更加生动和动态。过渡（Transition）是CSS3的一个重要特性，它允许元素从一种样式平滑地过渡到另一种...
纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标滑过按钮时的背景动画特效。这个特效可以极大地提升用户体验，使用户在与页面交互时感受到更加生动和动态的效果。...
在鼠标悬停时，通过CSS3的动画函数（如`@keyframes`）来控制这些属性的变化，使得背景图像在鼠标移动到图片上时产生平滑的动画效果。 在实际项目中，为了实现"纯CSS3鼠标悬停图片背景视差动画特效"，开发者通常需要...
在CSS（层叠样式表）的设计与开发过程中，有许多实用且直观的效果可以通过简单的代码实现，其中一个常见的需求就是改变鼠标指针样式。当我们希望鼠标悬停在某个元素（如链接）上时显示为手形指针，可以利用CSS中的`...
纯css实现的一个鼠标悬停背景图片做动画旋转效果 摒弃掉烦人的js，只用css3就可以实现的效果，有效的减小了客户端的内存，提高运行效率 使用方法超级简单： 1、将css复制到网页中 2、直接调用指定的...
这个伪类在鼠标悬停时触发，移开鼠标后则恢复原样。例如，我们可以为一个按钮设置:hover状态，当鼠标悬停在按钮上时，改变其背景颜色或边框效果： ```css .button { background-color: #333; color: white; } ....
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标经过文字时的背景动画特效。本文将详细介绍20款使用CSS3实现的炫酷鼠标经过文字背景动画特效，并探讨其背后的...
纯CSS3鼠标经过按钮背景填充动画特效，通过css3来实现按钮背景填充动画的特效，非常适合企业网站的或者商城网站，按钮的效果一般用途网站会员的注册于登录，使用动画特效，让页面观看起来更加美观！
在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...
【CSS3鼠标经过图片上移特效】是一种常见的网页交互效果，它通过CSS3的属性和选择器实现，为用户提供了更丰富的视觉体验。在这款特效中，当鼠标悬停在图片上时，图片会向上移动，模拟出一种浮动或者滑动的效果，常...
在这个例子中，我们可以假设按钮初始位置在图片外部，然后在鼠标移入时沿特定轴线移动到预定位置： ```css .fly-in-button { position: absolute; bottom: -50px; /* 初始位置 */ left: 50%; transform: ...
"JS+CSS鼠标经过放大图片（很酷）"这个主题就是一种常见的交互设计技术，它可以在用户将鼠标悬停在图片上时，使图片自动放大，给用户带来更直观、更生动的视觉体验。这种效果常常用于产品展示、相册浏览等场景，让...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标悬停时触发的动画效果。本文将深入探讨如何利用CSS3实现"鼠标悬停显示CSS3动画边框"的效果，以及相关的HTML5技术...