链接不使用下面的砖石容器

我不明白为什么我在标题链接上的悬停状态不起作用？我唯一推断出的是，它与下面的砖石容器有关。其他人想好如何绕过它了吗？或者我做错了什么。

我还应该注意：该链接在浏览器上根本不起作用，但有趣的是，该链接适用于移动设备（chrome 37.0 mac）（iphone ios 8 safari&chrome）

现场演示：jamesdolencedemo.tumblr.com

我知道tumblr把代码弄得一团糟，所以我把主题html和css 一起附上了

主题：

/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}span {text-decoration: none;}
/*
James Dolence 2.00
Logan Myers 2014
*/
html {overflow-y: scroll;}
body {background: rgba(255,255,255,0);color: rgba(0,0,0,1);font-family: "Founders Grotesk";}
a {color: rgba(0,0,0,1); text-decoration: none;}
a:hover {color: rgba(0,0,255,1);}
.container {width: 90%; max-width: 1250px; margin: 0 auto;}
header nav {width: 97%; margin: 3em 1% 3em; background: rgba(0,0,255,1); float: left;}
header nav h1 a {font-size: 300%;}
header.try2 {width: 97%; margin: 3em 1% 3em; background: rgba(0,0,255,1);}
footer {overflow: hidden; width: 97%; margin: 7em 1%;}
figcaption p {padding-bottom: 1em;}
img, iframe {width: 100%; height: auto;}
div.container {border-bottom: 7em solid rgba(0,0,0,1);}
/*photoset fix to just show 1 image */
#index .photoset a img {display: none;}
#index .photoset a img:first-child {display: block;} 
.column.w1, .column.w2, .column.w3 {margin: 0 1% 1em; display: block; float: left;}
.column.w1 {width: 31%;}
.column.w2 {width: 64%;}
.column.w3 {width: 97%;}
#index:after, body:after, .container:after, #index:after, #index:before, header:after { content: "020"; display: block; height: 0; clear: both; visibility: hidden; }
::-moz-selection {color: rgba(255,255,255,1); background: rgba(0,0,255,1);}
::selection {color: rgba(255,255,255,1); background: rgba(0,0,255,1);}
@media only screen and (max-width: 700px) {
	
	.perma .column.w1 {width: 64%}
	.perma .column.w2 {width: 97%}
}
@media only screen and (max-width: 500px) {
	.perma .column.w1 {width: 97%}
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>James Dolence</title>
	<meta name="description" content="James Dolence" />
	<meta name="keywords" content="James,Dolence,design,designer" />
	<link rel="shortcut icon" href="{Favicon}">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://hi.iamloganmyers.com/jd/jd_tumblr.css">
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="container">	
<header>
	<nav>
	<h1><a href="http://google.com">James Dolence</a></h1>
	</nav>
</header>
{block:IndexPage}
<section id="index">
	{block:Posts}
		{block:Photo}
		<article class="column w1 post">
			<a href="{Permalink}"><img src="{PhotoURL-500}"></a>
		</article>
		{/block:Photo}
		{block:Photoset}
		<article class="column w1 post photoset"><a href="{Permalink}">
			{block:Photos}<img alt="" src="{PhotoURL-500}">{/block:Photos}
        </a></article>
		{/block:Photoset}
		
	{/block:Posts}
	{block:Pagination}
		<div class="pagination">
			{block:PreviousPage}<a href="{PreviousPage}">-</a>{/block:PreviousPage}
			{block:NextPage}<a href="{NextPage}">+</a>{/block:NextPage}
		</div>
	{/block:Pagination}
</section>
{/block:IndexPage} 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/3fbycwu/87Hn3ipdt/masonry.pkgd.min.js"></script>
<script src="http://static.tumblr.com/3fbycwu/Sk0n3ipfd/imagesloaded.pkgd.min.js"></script>
<script src="http://static.tumblr.com/3fbycwu/0BCn3ipcz/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
	(function() {
		var $container = $('#index');
		    $container.infinitescroll({
		        navSelector  : ".pagination",            
		        nextSelector : ".pagination a:first",    
		        itemSelector : "article",
		        transitionDuration: 0,
		        bufferPx     : 0,
		        done : "",
		        loading: {
		            finishedMsg: "<p> </p>",
		            img : " ",
		            msg: null,
		            msgText: "<p> </p>"
		        },
		    },
		      function( newElements ) {
		            var $newElems = $( newElements ).css({ opacity: 0 });
		            $newElems.imagesLoaded(function(){
		                $newElems.animate({ opacity: 1 });
		                $container.masonry( 'appended', $newElems);
		            });
		          }
		    );
		    $container.imagesLoaded( function(){
		      $container.masonry();
		    });
		})();
	</script>		
	
<footer>
	<a href="mailto:jamesdolence@gmail.com">Jamesdolence@gmail.com</a>
</footer>
</body>
</html>

很明显，如果你运行它，它在这里会看起来一团糟

好吧，我想我会为未来的人自己回答。。。

这与tumblr使用的iframe有关。。。它们的z索引设置为z索引：9999999998；所以这是一个非常简单的解决方案，只需将元素的z索引更改为更大的索引就可以修复它

相关内容

最新更新

热门标签：