Categorias hover imagem

• Descrição:

Código:

<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Na descrição do fórum coloco esse código, mas tem forma de aumentar a área do retângulo do hover sem que aumente as categorias, ou seja, se vocês forem ao meu forum na parte do virtual DJ irão ver uma borda queria aumentar essa borda sem aumentar as categorias

É aqui que modifico mas ao aumentar a altura aumenta a categoria também

Código:

<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>

• Informações:

Código:

<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Código:

<div style=" text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><div class="sennior"><img style="width: 400px; height: 20px;" border="0" /></div></a>
</div>
<style type="text/css">
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat: no-repeat;
padding-top: 20px;
height: 66px !important;
width: 400px!important;
position: absolute;
left: 37pc;
top: 61pc;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Código:


<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 {
  max-width: 400px;
  max-height: 10px;
}
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>


Código:


<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 {
  max-width: 400px;
  max-height: 10px;
}
a.forumtitle {
  z-index: 5;
}
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>


Código:


<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 {
  max-width: 400px;
  max-height: 10px;
}
a.forumtitle {
  z-index: 5;
}
span.status.clearfix {
  z-index: 5;
}
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>