[英]Make clickable the whole block with <a> element
I want that the whole block be possible to click when hover the cursor over, to click on a link to go the link. 我希望将鼠标悬停在整个块上时可以单击,单击链接以转到该链接。
Example: 例:
How this now: 现在如何:
The code of the component is: 该组件的代码为:
<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>
So i want the entire block of red border to be possible to click 所以我希望整个红色边框都可以单击
My english is not the best, so I hope that I got you right: 我的英语不是最好的,所以我希望我对你没错:
you want one div-container to be clickable? 您想要一个div容器是可点击的吗?
if that is what you want, why don't you wrap the div container by your link 如果那是您想要的,为什么不通过链接包装div容器
Code Example: 代码示例:
<a href="...">
<div>
//Additional Code in here
</div>
</a>
Here's a fiddle with two ways - FIDDLE . 这是两种方式的提琴-FIDDLE 。
The upper one uses jQuery .on('click' and it points to a styled div. 上面的使用jQuery .on('click',它指向样式化的div。
The lower one changes an anchor tag to block, adds a picture and text, then on click redirects. 下一个将锚标记更改为阻止,添加图片和文本,然后单击重定向。
I'm sure there are other ways. 我敢肯定还有其他方法。
HTML 的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.