Skip to content

Instantly share code, notes, and snippets.

@zaru
Created September 6, 2012 12:46
Show Gist options
  • Save zaru/3655912 to your computer and use it in GitHub Desktop.
Save zaru/3655912 to your computer and use it in GitHub Desktop.
内部リンクを抑えるつつ、全体をクリッカブルにする
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}input,textarea,select{*font-size:100%}legend{color:#000}
body{font:13px/1.231 'Hiragino Kaku Gothic Pro','Lucida Grande', Verdana, Arial, Meiryo, メイリオ, sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}
.overlink{
cursor: pointer;
}
.section{
width:483px;
border:1px solid #bdbdbd;
border-radius: 5px;
overflow: hidden;
float: left;
margin: 0 10px 10px 0;
position: relative;
}
.section .img{
width:195px;
float: left;
display: inline;
margin: 4px 0 0 4px;
}
.section .text{
width:260px;
float: right;
margin:4px 4px 0 0;
display: inline;
color:#333333;
}
.section .text dt{
font-size:116%;
font-weight: bold;
padding: 5px 0 10px 0;
}
.section .text dd{
font-size: 93%;
line-height: 1.4;
}
.link{
position: absolute;
right:8px;
bottom:5px;
z-index: 10;
}
jQuery(function(){
jQuery('.overlink').click(function(){
var e = jQuery(this).find('a');
location.href = e.attr('href');
});
jQuery('.overlink').hover(
function(){
jQuery(this).find('dt,dd').css('text-decoration','underline');
},
function(){
jQuery(this).find('dt,dd').css('text-decoration','none');
}
);
});
<div class="section overlink">
<div class="img">
<img src="images/dummy/list-thumbnail.jpg" alt="list-thumbnail" width="195" height="120" />
</div>
<div class="text">
<dl>
<dt>株式会社ベーシック</dt>
<dd>iPhoneアプリ専業だからできたプロモーションまでワンストップのサービス提供iPhoneアプリ専業だからできたプロモーションまでワンストップのサービス提供</dd>
</dl>
<p class="link"><a href=""><img src="images/common/bt_detail_mini.png" alt="bt_detail_mini" width="118" height="19" /></a></p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment