Text Box erst bei Mausover, bin schon verzweifelt

[correl]

Hallo zusammen,

wie ihr an meinem Code seht, soll die rechte Text Box erscheinen, erst wenn man mit der Maus über den dementsprechenden Bereich gleitet.
Die Textbox soll natürlich immer an der passenden Stelle erscheinen und nicht immer oben. Könnte mir da bitte jemand meinen Code optimieren das er mal funktioniert. danke sehr.

<style type="text/css">
div.tab_hersteller1 {width:126px; float:left; margin:3px; border:solid #F00 3px;}
div.tab, div.cattitle, div.cattext, div.catimg{overflow:hidden;}
div.tab{width:125px;height:105px; border:solid #CCC 1px;background:#FFF;cursor:pointer; z-index:10; }
div.cattitle{text-align:center;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease; width:100%;height:55%;}
div.cattitle span{font-size:12px;font-weight:bold;line-height: 30px;color:#333;}
div.cattext{font-size:10px; text-align:center;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;width:100%;height:45%;}
div.catimg{width:100%;height:0%; z-index:10;}
div.catimg a span {width:200px;height:110px; z-index:100; position:absolute; left:150px; top:60px; border:solid #CCC 1px;}
div.catimg img{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;  margin:2px;}
div.tab:hover div.cattitle, div.tab:hover div.cattext{height:0%;opacity:0;}
div.tab:hover div.catimg{height:100%;}
</style>

<div class="tab_hersteller1">
<div class="hersteller_logo"><img src="katalog/logo_firma.jpg" alt="FIRMA"></div>
	<div class="tab">
    	<div class="cattitle"><span>Produkt</span></div>
	    <div class="catimg"><a href="#" target="_self"><img src="http://thumbs1.ebaystatic.com/d/l225/m/mhQ-0s7d2l9Fy2q4LvS0TAA.jpg" alt="Produkt">
        <span>Das ist ein Test</span></a></div>
	    <div class="cattext">Poduktart</div>
	</div>
    
	<div class="tab">
    	<div class="cattitle"><span>Produkt</span></div>
	    <div class="catimg"><a href="#" target="_self"><img src="http://thumbs1.ebaystatic.com/d/l225/m/mhQ-0s7d2l9Fy2q4LvS0TAA.jpg" alt="Produkt">
        <span>Das ist ein Test</span></a></div>
	    <div class="cattext">Poduktart</div>
	</div>
    
    	<div class="tab">
    	<div class="cattitle"><span>Produkt</span></div>
	    <div class="catimg"><a href="#" target="_self"><img src="http://thumbs1.ebaystatic.com/d/l225/m/mhQ-0s7d2l9Fy2q4LvS0TAA.jpg" alt="Produkt">
        <span>Das ist ein Test</span></a></div>
	    <div class="cattext">Poduktart</div>
	</div>    
    
</div>

 

[developr]

Das kannst du einfach mit dem Title-Attribut machen.

<div class="tab" title="Dies ist ein Test in einer Toolbox">
    	<div class="cattitle"><span>Produkt</span></div>
	    <div class="catimg"><a href="#" target="_self"><img src="http://thumbs1.ebaystatic.com/d/l225/m/mhQ-0s7d2l9Fy2q4LvS0TAA.jpg" alt="Produkt">
        <span>Das ist ein Test</span></a></div>
	    <div class="cattext">Poduktart</div>
	</div>