由于 CSS，href 链接不起作用
2017-01-15
116
我在这里使用此菜单 http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html
问题是当我点击
<a href="1.html">Application 1</a>
它停留在菜单上而不是转到 1.html。我发现问题位于此 css 块中
.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
但看不到如何修复它
完整源代码：
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<link rel="stylesheet" href="lanceur/style.css">
<script src="lanceur/jquery-1.7.1.min.js"></script>
<script src="lanceur/selectivizr.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<![endif]-->
<style>
/* Demo page only */
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a{
color: #777;
}
</style>
</head>
<body>
<ul class="menu">
<li tabindex="1">
<span class="title"><a href="1.html">Application 1</a></span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Two</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Three</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Four</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Five</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Six</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Seven</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Eight</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Nine</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
</ul>
<!-- <script>
(function(){
// Append a close trigger for each block
$('.menu .content').append('<span class="close">x</span>');
// Show window
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
// Reset all
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}
// When a li is clicked, show its content window and position it above all
$('.menu li').click(function() {
showContent($(this));
});
// When tabbing, show its content window using ENTER key
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});
// When right upper close element is clicked - reset all
$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
// Also, when ESC key is pressed - reset all
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
})();
</script> -->
</body>
</html>
style.css
.menu{
width: 620px;
margin: 100px auto; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
.menu {
zoom:1;
}
/* -------------------------------- */
.menu li {
position: relative;
float: left;
cursor: pointer;
height: 120px; width: 200px;
margin: 10px 0 0 10px;
color: #fff;
}
.menu li:hover, .menu li:focus{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.2), rgba(255,255,255,0));
}
.menu .cover{
z-index: 2;
}
.menu .cover:focus{
outline: 0;
}
/* -------------------------------- */
.menu li::after{
content: counter(li);
counter-increment: li;
font: italic bold 10px serif, georgia;
position: absolute;
color: rgba(255,255,255,.1);
opacity: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menu li:hover::after, .menu li:focus::after{
font-size: 100px;
opacity: 1;
}
.menu .cover::after{
z-index: -1;
}
/* -------------------------------- */
.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
margin-top: 0;
}
.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
margin-left: 0;
}
/* -------------------------------- */
.menu li:nth-child(1),
.menu li:nth-child(1) .content,
.menu li:nth-child(1) .close{
background-color: #2c618f;
}
.menu li:nth-child(2),
.menu li:nth-child(2) .content,
.menu li:nth-child(2) .close{
background-color: #91ab31;
}
.menu li:nth-child(3),
.menu li:nth-child(3) .content,
.menu li:nth-child(3) .close{
background-color: #714a28;
}
.menu li:nth-child(4),
.menu li:nth-child(4) .content,
.menu li:nth-child(4) .close{
background-color: #e58600;
}
.menu li:nth-child(5),
.menu li:nth-child(5) .content,
.menu li:nth-child(5) .close{
background-color: #c33a00;
}
.menu li:nth-child(6),
.menu li:nth-child(6) .content,
.menu li:nth-child(6) .close{
background-color: #7f5dac;
}
.menu li:nth-child(7),
.menu li:nth-child(7) .content,
.menu li:nth-child(7) .close{
background-color: #5672b7;
}
.menu li:nth-child(8),
.menu li:nth-child(8) .content,
.menu li:nth-child(8) .close{
background-color: #69003f;
}
.menu li:nth-child(9),
.menu li:nth-child(9) .content,
.menu li:nth-child(9) .close{
background-color: #393043;
}
/* -------------------------------- */
.menu .content{
opacity: 0; display: none\9;
overflow: hidden;
font: 12px Arial, Helvetica;
position: absolute;
height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.menu .expanded{
opacity: .95; display: block\9;
overflow: visible;
padding: 40px;
height: 300px; width: 540px; /* Cover the entire area */
}
.menu li:nth-child(3n) .content{ /* 3,6,9 */
right: 0;
}
.menu li:nth-child(3n-1) .expanded{ /* 2,5,8 */
left: 50%;
margin-left: -310px;
}
.menu li:nth-child(7) .content, /* 7,8,9 */
.menu li:nth-child(8) .content,
.menu li:nth-child(9) .content{
bottom: 0;
}
.menu li:nth-child(4) .expanded, /* 4,5,6 */
.menu li:nth-child(5) .expanded,
.menu li:nth-child(6) .expanded{
margin-top: -190px;
top: 50%;
}
/* -------------------------------- */
.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
.menu li:hover .title{
opacity: .7;
}
/* -------------------------------- */
.menu .close {
display: none;
border: 5px solid #fff;
color: #fff;
cursor: pointer;
height: 40px; width: 40px;
font: bold 20px/40px arial, helvetica;
position: absolute;
text-align: center;
top: -20px; right: -20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.menu .cover .close{
display: block;
}
1个回答
您的 div 与 a 标签重叠，因此当您单击按钮时，您单击的是 div 而不是 a 标签，因此不会触发 a 标签。
要解决此问题，您所要做的就是用 a 标签包围按钮，而不是将 a 标签放在按钮内。
<a href="1.html"><span class="title">Application 1</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div></a>
Alexander Gratzl
2017-01-15