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>