我有一个布局,其中包含 4 个 320x320px 的链接作为图像。它们在悬停时会发生不透明度变化。如果可能的话,我现在想要做的是单击该框并将其扩展到带有新内容的预定大小。如果没有,则导航到具有新内容的同一页面上的隐藏 div。希望这是有道理的。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>Adam Sackfield's Portfolio</title>
<script src="scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("nav a").hover(function() {
$(this).stop().animate({
opacity: 1
}, 300);
}, function() {
$(this).stop().animate({
opacity: 0.3
}, 300);
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
<img src="images/logoarrows.jpg">
</div><!-- Logo Close -->
<div id="social">
</div><!-- Social Close -->
</header>
<nav>
<a href="#" class="yellow"><p class="yelinner">Home</p></a>
<a href="#" class="pink"><p class="pinkinner">About Me</p></a>
<a href="#" class="purple"><p class="purpinner">Portfolio</p></a>
<a href="#" class="green"><p class="greinner">Contact Me</p></a>
</nav>
<section>
<article>
</article>
<aside>
</aside>
</section>
<footer>
</footer>
</div><!-- Wrapper Close -->
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #000000;
}
header {
width:1000px;
height: 220px;
}
#wrapper header #logo {
width: 400px;
padding-left: 200px;
}
body {
background: #111111;
color: #FFF;
font-family:’Open Sans’, sans-serif;
font-weight: 300;
font-size: 16pt;
}
a {
color: #FFF;
text-decoration: none;
}
nav {
width: 800px;
margin-top: 60px;
padding-left: 75px;
}
#wrapper nav a {
width: 320px;
line-height: 320px;
display: inline-block;
margin: 4px;
opacity: 0.3;
text-align: center;
}
.yellow { background-image: url(../images/tiles/yellow.jpg);
background-repeat:no-repeat;
}
.purple { background-image: url(../images/tiles/purple.jpg);
background-repeat:no-repeat;
}
.pink { background-image: url(../images/tiles/pink.jpg);
background-repeat:no-repeat;
}
.green { background-image: url(../images/tiles/green.jpg);
background-repeat:no-repeat; }