CSS设置DIV Herf底层图片和链接同时改变,兼容IE,Firefox,Opera,Safari,Chrome等

简介: /*CSS樣式設置 塗聚文 Geovin Du**/.text8{ font-family: Arial, Helvetica, sans-serif; background-image: url(../images/05.jpg); height:42px; text-align:center; }.geovindu{ cur
/*CSS樣式設置 塗聚文 Geovin Du**/
.text8
{
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(../images/05.jpg);
    height:42px;   
    text-align:center;  


}
.geovindu
{
    cursor:auto;
    text-decoration: none;
    color: #000;


}
 a.geovindu:hover .text8
{
    /*background: #000;*/
    color:red;
    background-image: url(../images/06.jpg);
}
.content
{
    margin-top:10px; padding-top:10px;
}
a.geovindu:visited .text8
{
 text-decoration:none;
 color:red;
 background-image: url(../images/06.jpg);

   
}

/*HTML 代碼  塗聚文 Geovin Du**/

<!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=utf-8" />
<title>塗聚文,CSS设置DIV Herf底层图片和链接同时改变 </title>
<link rel="shortcut icon" href="http://www.dupcit.com/faviconlukfook.ico" type="image/x-icon" />
<link rel="icon" href="http://www.dupcit.com/faviconlukfook.ico" type="image/ico" />
<link rel="bookmark" href="http://www.dupcit.com/faviconlukfook.ico"/>
<meta name="Author" content="Geovin Du 塗聚文"/>
<meta name="Keywords" content="塗聚文"/>
<meta name="Description" content="塗聚文"/>
<link href="http://geovindu.blog.163.com/blog/css/Css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
 <a href="http://geovindu.blog.163.com/blog/#"  id="geovindu" class="geovindu">
                          <div class="text8" id="text8"><p id="content" class="content">塗聚文系統産品介紹</p></div> </a>
<a href="http://geovindu.blog.163.com/blog/#"  id="geovindu" class="geovindu">
                          <div class="text8" id="text8"><p id="content" class="content">塗聚文産品介紹</p></div> </a>

</div>
</body>
</html>



目录
相关文章
|
6月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
85 4
|
28天前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
3天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
15 2
|
25天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
40 4
|
27天前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
17 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
2月前
|
Web App开发 搜索推荐 数据安全/隐私保护
|
2月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
84 1
|
4月前
|
前端开发
如何使用 CSS object-fit 进行图片的缩放和裁剪
如何使用 CSS object-fit 进行图片的缩放和裁剪
111 0
如何使用 CSS object-fit 进行图片的缩放和裁剪
|
4月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
5月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
135 0

热门文章

最新文章