使用同一 div 内的其他链接和元素使背景图像可点击答案

【问题标题】：Make background image clickable with other links and elements inside the same div使用同一 div 内的其他链接和元素使背景图像可点击
【发布时间】：2017-03-31 00:01:01
【问题描述】：

现在下面的代码会生成这里看到的内容：

目前必须点击标题才能加载帖子页面，但我想让整个背景图片都可以点击。这可能吗？我试过用标题代码中的标签包围卡片 div，但这仍然不能让我像链接一样点击背景图片。

<article id="post-<?php the_ID(); ?>" <?php post_class('card-box col-lg-4 col-md-6 col-sm-12 col-xs-12'); ?>>
    <div class="card" data-background="image" data-src="<?php esc_url( the_post_thumbnail_url( 'large' ) ); ?>">
             <div class="header">
                    <?php
                    $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                    ?>                                                          
                        <div class="category">
                            <h6>
                                <span class="category">
                                    <?php  echo '<a class="category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>'; ?>
                                </span>
                            </h6>
                        </div>
                    <?php } ?>                        
                </div>
                <div class="content">
                    <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
                    <span class="date"><?php echo esc_html( get_the_date() ); ?></span>
                </div>
                <div class="filter"></div>
                </div> <!-- end card -->
        </article>

【问题讨论】：

您还想将类别名称链接到类别页面？
是的，如果可能，我想保留该类别链接。该卡 div 上的所有其他位置都应链接到该帖子。尽可能避免使用 js
这是您的问题的延续stackoverflow.com/q/43058846/5641669 - 为什么不直接编辑/扩展原始问题？
您可以在链接中添加<img> 标签。只需确保链接不包含图像以外的任何内容。然后，您可以添加适当的 CSS 样式以使图像显示就好像它是背景图像（例如使用绝对定位或 z-index）。这将是我会做的方式，但你可能会找到另一种方式。我希望这可以帮助你！ :)

标签： php html css wordpress

【解决方案1】：

试试下面的jQuery方法

$('.card').on('click', function(event){
  var elementTag = event.target.tagName.toLowerCase();
  if(elementTag === 'div') {
     var pageurl = $(this).find('.entry-title a').attr('href');
     window.location.href = pageurl;
  }
});`

【讨论】：

对不起，我在阅读您关于不使用 JS 的评论之前发布了 jQuery 方法。如果你关心 SEO，我不确定上面的代码是否会影响你的 SEO。
我不确定是否可以在不使用 JS 的情况下在链接中包含链接。如果有人得到答案，我会关注这个问题