0

ワードプレスのポートフォリオサイトを再構築中です。グレースケールで始まり、透明な PNG が上にあり、PNG なしのフルカラーにロールオーバーする画像を取り上げました。

透明な PNG をアイキャッチ画像の上に配置する方法を見つけた後、PNG によってボックス全体がクリックできなくなることに気付く前に、自分自身を軽くたたきました。

下のリンクをキャンセルしています（投稿する注目の画像）

「pointer-events:none」も役に立ちません。実際には、ロールオーバー効果が少しグリッチします。

画像関連のCSSです...

#png1 {width: 305px; 
height: 175px;
float: left; 
position: absolute;
    z-index: 1;
} 
#png1:hover {opacity: 0;
}

そして、これは私が行っているphpです...

<?php if ( have_posts() ) : ?>
<?php $i = 0; ?>
<?php while ( have_posts() ) : the_post(); $i++; ?>


<div class="post_home">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
    <a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
        <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(array(305,175)); ?>
        <?php else : ?>
            <img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
        <?php endif; ?>
    </a>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
</div>


<?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
<?php endwhile; ?>

助言がありますか？

編集：

私は決してウェブデザイナーではありません。私は印刷デザイナーです。私はCSSに慣れているので、WPで働いています。答えがコードの中にあるような気がして、私をじっと見つめていますが、どうすればいいのかわかりません。

どんな助けでも、とても素晴らしいでしょう:)

4

1 に答える 1

0

コメントで説明したように、html の構造を少し変更して img タグをアンカー内に配置するだけで、2 行を入れ替えるだけで実現できます。

<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">

になる

<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
于 2013-07-16T11:30:58.607 に答える