<html lang="en">
<head>
<meta charset="UTF-8">
<title>陌陌的故事</title>
<style type="text/css">
.contents{
width: 40%;
height: 40%;
background-image: url("images/8.jpg");
background-repeat: no-repeat;
background-size:100% 100% ;
box-shadow:5px 5px 5px #888;
}
.text{
font-size: 15px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="contents">
<h3 style="color: #00F7DE;text-align: center";size="20" onmouseover="changeTitle(this)" onmouseout="oldTitle(this)">陌陌:发现直实的距离</h3>
<div class="text" onmouseover="changeContent(this)" onmouseout="oldContent(this)">
一对异地情侣每天在陌陌上聊天，彼此的距离始终都是1000公里。某晚她回家
后习惯的打开陌陌，发现双方的距离只有1公里，再刷新，只有0.9公里，她明白
发生了什么，激动的走向门口。当晚，他们的距离只有-5厘米。
于是第二天，他们还是分手了......
</div>
</div>
<script type="text/javascript">
//标题变换
function changeTitle(element) {
element.style.fontSize='24px';
element.style.color = 'red';
element.style.textDecoration = "underline";
}
function oldTitle(element) {
element.style.fontSize='20px';
element.style.color = '#00F7DE';
element.style.textDecoration = "";
}
//内容变换
function changeContent(element) {
element.style.color = 'red';
}
function oldContent(element) {
element.style.color = 'black';
}
</script>
</body>
</html>
