2014-10-08 44 views
0

我無法弄清楚爲什麼我的標題鏈接懸停狀態不起作用?我推斷的唯一的事情是它與它下面的砌體容器有關。其他人有沒有想過如何解決這個問題?或者我做錯了什麼。鏈接不能使用它下面的砌體容器

我還應該注意到:鏈接在瀏覽器上根本不起作用,但有趣的是鏈接適用於手機。 (鉻37.0 MAC)(iphone的ios 8野生動物園&鉻)

現場演示: 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) { 
 
\t 
 
\t .perma .column.w1 {width: 64%} 
 
\t .perma .column.w2 {width: 97%} 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
\t .perma .column.w1 {width: 97%} 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>James Dolence</title> 
 
\t <meta name="description" content="James Dolence" /> 
 
\t <meta name="keywords" content="James,Dolence,design,designer" /> 
 
\t <link rel="shortcut icon" href="{Favicon}"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="http://hi.iamloganmyers.com/jd/jd_tumblr.css"> 
 
\t <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
 
</head> 
 
<body> 
 

 

 

 
<div class="container"> \t 
 
<header> 
 
\t <nav> 
 
\t <h1><a href="http://google.com">James Dolence</a></h1> 
 
\t </nav> 
 
</header> 
 

 

 
{block:IndexPage} 
 
<section id="index"> 
 
\t {block:Posts} 
 
\t \t {block:Photo} 
 
\t \t <article class="column w1 post"> 
 
\t \t \t <a href="{Permalink}"><img src="{PhotoURL-500}"></a> 
 
\t \t </article> 
 
\t \t {/block:Photo} 
 

 
\t \t {block:Photoset} 
 
\t \t <article class="column w1 post photoset"><a href="{Permalink}"> 
 
\t \t \t {block:Photos}<img alt="" src="{PhotoURL-500}">{/block:Photos} 
 
     </a></article> 
 
\t \t {/block:Photoset} 
 
\t \t 
 
\t {/block:Posts} 
 

 
\t {block:Pagination} 
 
\t \t <div class="pagination"> 
 
\t \t \t {block:PreviousPage}<a href="{PreviousPage}">-</a>{/block:PreviousPage} 
 
\t \t \t {block:NextPage}<a href="{NextPage}">+</a>{/block:NextPage} 
 
\t \t </div> 
 
\t {/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"> 
 
\t (function() { 
 
\t \t var $container = $('#index'); 
 
\t \t  $container.infinitescroll({ 
 
\t \t   navSelector : ".pagination",    
 
\t \t   nextSelector : ".pagination a:first",  
 
\t \t   itemSelector : "article", 
 
\t \t   transitionDuration: 0, 
 
\t \t   bufferPx  : 0, 
 
\t \t   done : "", 
 
\t \t   loading: { 
 
\t \t    finishedMsg: "<p> </p>", 
 
\t \t    img : " ", 
 
\t \t    msg: null, 
 
\t \t    msgText: "<p> </p>" 
 
\t \t   }, 
 
\t \t  }, 
 
\t \t  function(newElements) { 
 
\t \t    var $newElems = $(newElements).css({ opacity: 0 }); 
 
\t \t    $newElems.imagesLoaded(function(){ 
 
\t \t     $newElems.animate({ opacity: 1 }); 
 
\t \t     $container.masonry('appended', $newElems); 
 
\t \t    }); 
 
\t \t   } 
 
\t \t ); 
 
\t \t  $container.imagesLoaded(function(){ 
 
\t \t  $container.masonry(); 
 
\t \t  }); 
 
\t \t })(); 
 
\t </script> \t \t 
 

 
\t 
 

 

 
<footer> 
 
\t <a href="mailto:[email protected]">[email protected]</a> 
 
</footer> 
 

 
</body> 
 
</html>
顯然,如果你運行它,它會看起來對這裏搞砸...

回答

0

好吧,我想通了,所以我想我會回答它自己對未來的人......

它與它使用的tumblr的iframe有關...他們的z-index設置爲z-index:9999999998;所以這是一個非常簡單的解決方案,只是將元素的z-index改爲更大的東西似乎可以修復它。

(也這就是爲什麼它是爲移動工作,因爲這些I幀是不同的...)

大號