WISS inc.

DIV要素をHOVER指定できるリンクにする

core. jQuery拡張のBiggerlinkがあまりに素敵なので。

リスト表示ブロック内に写真と文字を配置するような場合でもごっそりリンク領域にできると嬉しいです、ポータルなどで活用できそうです。Aタグをブロック要素にすることでも可能ですが構造的に限界があります。これをDojoで出来るかやってみました。

まず、マウスオーバー時に自動追加されるHOVER用ののスタイルを定義（初期値.hover）。追加されるクラスは既存のクラスの上位に配置されるようなので"!important"が必要です。

<style type="text/css">	
.hover {
	cursor: pointer;
	background-color:#DAF1F1 !important;
}
.hover a:link,.hover a:visited {
	color: #006666 !important;
}
.hover .bar {
	background-color:#C7D8C6 !important;
}
</style>

<div class="listBox links">
  <strong><a href="http://...">Wiss</a></strong>
  <div>
    Dojo (Dojo Toolkit)は...<br/>
    <a href="http://...">Read more</a>
  </div>
</div>
・・・以上の繰り返し

<script type="text/javascript">
function biggerlink(opts) {
  var settings = { hoverclass:'hover', 
    targetclass:'hot' };
  if (opts) for (var k in opts) settings[k] = opts[k];
  //対象クラスすべてに処理
  dojo.query("."+settings.targetclass).forEach(
    function(el){
      dojo.connect(el,"onmouseover",function(){
        dojo.addClass(el,settings.hoverclass);
      });
      dojo.connect(el,"onmouseout",function(){
        dojo.removeClass(el,settings.hoverclass); 
      });
      dojo.connect(el,"onclick",function(e){
        var o = dojo.query("a",el)[0]; if (!o) return;
        window.location = o.href;
        e.stopPropagation(); //イベントの伝搬を中止
        e.preventDefault();  //デフォルト処理停止
      });
    }
  );
}
</script>