您的位置：首页 > Web前端 > CSS

css控制鼠标移过改变透明度

2011-06-29 09:59 141 查看

<!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" />

<link rel="stylesheet" type="text/css" href="1.5.css" />

<title>exercise1.5</title>

</head>

<body>

<img src="nike.jpg" class="opa1" alt="nike.jpg" />

<img src="beatles.jpg" class="opa2" alt="beatles.jpg" onmouseover="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.MozOpacity=1;this.filters.alpha.opacity=100" />

<div id="box"> <a href="http://www.google.com" target="_blank">google</a> </div>

</body>

</html>

@charset "utf-8";

body {

    background-color: #666;

}

div#box {

    width: 100px;

    height: 100px;

    position: absolute;

    left: 50px;

    bottom: 50px;

    border: 1px solid #000;

}

a:link {

    color: yellow;

}

a:visited {

    color: red;

}

a:hover {

    color: green;

}

a:active {

    color: blue;

}

.opa1 {

    opacity: 0.5;

    filter: alpha(opacity=50);

}

.opa2 {

    opacity: 1;

    filter: alpha(opacity=100);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css stylesheet filter xhtml class border

相关文章推荐

新的分享

章节导航