个人中心
gpt4 book ai didi

html - 链接不适用于其下方的砖石容器

转载 作者：行者123 更新时间：2023-11-28 09:17:07 25 4
gpt4 key购买 nike

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

我还应该注意:该链接在浏览器上根本不起作用，但有趣的是该链接适用于移动设备。 (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: "\0020"; 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>
显然，如果您运行它，它会在此处看起来一团糟...

最佳答案

好吧，我想通了，所以我想我会自己为 future 的人回答...

这跟它使用的tumblr的iframe有关系……他们的z-index设置为z-index: 9999999998；所以这是一个非常简单的解决方案，只需将元素的 z-index 更改为更大的东西似乎就可以解决它。

(这也是它适用于移动设备的原因，因为那些 iframe 是不同的...)

大号

关于html - 链接不适用于其下方的砖石容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26263556/

25 4 0
文章推荐： css - CORS(Access-Control-Allow-Origin header )如何提高安全性？
文章推荐： php - 如何在php中访问javascript变量
文章推荐： swift - 背景图像节点干扰触摸命令
文章推荐： css - 编辑 Ionic 选项卡图标样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com