Ссылки не работают с контейнером кладки под ним
Я не могу понять, почему мое состояние наведения на ссылке заголовка не работает? Единственное, что я понял, это то, что это связано с кладочным контейнером под ним. Кто-нибудь еще разобрался, как обойти это? или что я делаю не так.
Следует также отметить, что ссылка не работает вообще в браузере, но, что интересно, ссылка работает для мобильных устройств. (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>1 ответ
Ну, я понял это, так что, думаю, я сам отвечу на это для будущих людей...
Это как-то связано с фреймами tumblr, которые он использует... Их z-index установлен в z-index: 9999999998; так что это довольно простое решение - просто изменить z-индекс вашего элемента на что-то большее, кажется, это исправить.
(и именно поэтому он работал для мобильных устройств, потому что эти iframes разные для этого...)
L