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

最新推荐文章于 2021-06-01 12:36:00 发布

geovi

最新推荐文章于 2021-06-01 12:36:00 发布

阅读量932

点赞数

分类专栏： css 文章标签： safari div css firefox opera chrome

本文链接：https://blog.csdn.net/geovi/article/details/6749251

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS设置一个包含底层图片的DIV，并在点击时同时改变链接和图片效果，内容适用于IE、Firefox、Opera、Safari和Chrome等主流浏览器。

摘要由CSDN通过智能技术生成

/*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>