jqueryで、○○ is undefind
WEBページを作成中です。あるエリア（例id="sub"）のリンクをマウスオーバーすると、そこと関連の深いエリアへのリンク（例id="main"内のリンク）もハイライトする、といったことをやりたいので、
下記のようなコードを書きました。が、sub内リンクに触ると、
「this.product is undefined」となり、思うような動きになりません。
jsコード中にコメントにした部分を生かして表示すると、一応urlをalertするので、いいところまでは行っているように思うのですが。。。どなたか間違いをご指摘くださると助かります。よろしくお願いします。
`
<html>
<head>
<title>TEST</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
//○○技術コンテンツ（グローバルナビを含む）にマウスオーバー⇒□□製品コンテンツがハイライト
var tech_product = [
{tech:jQuery('a[href *="abcd"]'), product:jQuery('#main a[href *="ABCD"]')},
{tech:jQuery('a[href *="efgh"]'), product:jQuery('#main a[href *="EFGH"]')},
{tech:jQuery('a[href *="ijkl"]'), product:jQuery('#main a[href *="IJKL"]')},
{tech:jQuery('a[href *="mnop"]'), product:jQuery('#main a[href *="MNOP"]')},
{tech:jQuery('a[href *="qrst"]'), product:jQuery('#main a[href *="QRST"]')}
];
jQuery.each(tech_product, function() {
//alert(tech_product[2].tech[0].href);
this.tech.hover(function() {
this.product.addClass('linkage');
}, function() {
this.product.removeClass('linkage');
});
});
});
</script>
</head>
<body>
<div id="sub">
<ul><li><a href="abcd/contents.html">abcdへ</a></li><li><a href="efgh/contents.html">efghへ</a></li><li><a href="ijkl/contents.html">ijklへ</a></li>
<li><a href="mnop/contents.html">MNOPへ</a></li><li><a href="qrst/contents.html">qrstへ</a></li>
</ul>
</dv>
<div id="main">
<ul><li><a href="ABCD/contents.html">ABCDも関係あるよ</a></li><li><a href="EFGH/contents.html">EFGHも関係あるよ</a></li><li><a href="IJKL/contents.html">IJKLも関係あるよ</a></li>
<li><a href="MNOP/contents.html">MNOPも関係あるよ</a></li><li><a href="QRST/contents.html">QRSTも関係あるよ</a></li>
</ul>
</div>
</body>
</html>
`
お礼
回答ありがとうございます！ まさにこれです！ ありがとうございました！