使用<a>元素</a>使整個塊可點擊

Question

我希望將鼠標懸停在整個塊上時可以單擊，單擊鏈接以轉到該鏈接。

例：

現在如何：

該組件的代碼為：

<li<?php echo strlen($item->custom_tags) ? ' class="'.$item->custom_tags.'"' : ''; ?> data-mosaic-item>
<div class="sprocket-mosaic-item" data-mosaic-content>
    <?php echo $item->custom_ordering_items; ?>
    <div class="sprocket-padding">
        <?php if ($item->getPrimaryImage()) :?>
        <div class="sprocket-mosaic-image-container">
            <?php if ($item->getPrimaryLink()) : ?><a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>"><?php endif; ?>
            <img src="<?php echo $item->getPrimaryImage()->getSource(); ?>" alt="" class="sprocket-mosaic-image" />
            <?php if ($item->getPrimaryLink()) : ?>
                <span class="sprocket-mosaic-hover"></span>
                <span class="sprocket-mosaic-hovercontent"><span>+</span><?php rc_e('READ_MORE'); ?></span>
            </a>
            <?php endif; ?>

        <?php if ($item->getPrimaryLink()) : ?>
            <a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>" class="sprocket-readmore"><span><?php rc_e('READ_MORE'); ?></span></a>
        <?php endif; ?>


        <?php if (count($item->custom_tags_list)) : ?>
            <ul class="sprocket-mosaic-tags">
            <?php
                foreach($item->custom_tags_list as $key => $name){
                    echo ' <li class="sprocket-tags-'.$key.'">'.$name.'</li>';
                }
            ?>
            </ul>
        <?php endif; ?>

        </div>
        <?php endif; ?>

        <div class="sprocket-mosaic-head">
            <?php if ($item->getTitle()): ?>
            <h2 class="sprocket-mosaic-title">
                <?php if ($item->getPrimaryLink()): ?><a href="<?php echo $item->getPrimaryLink()->getUrl(); ?>"><?php endif; ?>
                    <?php echo $item->getTitle();?>
                <?php if ($item->getPrimaryLink()): ?></a><?php endif; ?>
            </h2>
            <?php endif; ?>

            <?php if ($parameters->get('mosaic_article_details')): ?>
            <div class="sprocket-mosaic-infos">
                <span class="author"><?php //echo $item->getAuthor(); ?></span>

                <!-- 
                <i class="icon-time"></i> 
                <span class="mosaic-date">
                    <?php //echo $item->getDate();?>
                </span> -->

                <?php if($item->getDate()): ?>
                <!-- Date created -->
                <span class="mosaic-date">
                    <i class="icon-time"></i>
                    <?php echo JHTML::_('date', $item->getDate(), JText::_('d M Y')); ?>
                </span>
                <?php endif; ?>


            </div>

            <?php endif; ?>



        </div>




        <div class="sprocket-mosaic-text">
            <?php echo $item->getText(); ?>
        </div>

    </div>
</div>

所以我希望整個紅色邊框都可以單擊

Answer 1

我的英語不是最好的，所以我希望我對你沒錯：

您想要一個div容器是可點擊的嗎？

如果那是您想要的，為什么不通過鏈接包裝div容器

代碼示例：

<a href="...">
<div>
//Additional Code in here
</div>
</a>

Answer 2

這是兩種方式的提琴-FIDDLE 。

上面的使用jQuery .on（'click'，它指向樣式化的div。

下一個將錨標記更改為阻止，添加圖片和文本，然后單擊重定向。

我敢肯定還有其他方法。

的HTML

<div class='wholeblock'>
    <img src='http://i.imgur.com/DgYUsKY.jpg?1' />
    <div>Minions are fun</div>
    <div>Minions are happy</div>
    <div>There are many Minions</div>
</div>

<a href='www.stackoverflow.com' class='wholeblock'>
    <img src='http://i.imgur.com/DgYUsKY.jpg?1' />
    <div>Minions are fun</div>
    <div>Minions are happy</div>
    <div>There are many Minions</div>
</a>