راهنمایی در کدهای css

[Payam.Hayati 15]

سلام دوستان و عزیزان

این تصویر رو ببینید :

می خوام فقط وقتی hover می کنم متن هایی که در قسمت قرمز رنگ نوشته شده نمایش داده بشه،(در حالت عادی قابل رویت نباشن)به این شکل :

اما الآن به این شکل هست :

و وقتی hover می کنم متن در داخل کادر قرار میگیره (متن در هر دو حالت عادی و hover وجود داره)

یک id دیگه نوشتم که متنم رو درونش قرار بدم در حالت عادی Displaye:none کردم بعد خواستم در حالت hover نمایش داده بشه اما موفق نشدم.

این کدهای CSS :

.baner-web
 {
  width:90px;
  height:30px;
  background-color:#F00;
  position:absolute;
  margin:10px 20px auto;
  color:#FFF;
  cursor:pointer;
  text-align:center;
  font-family:tahoma;
  font-size:12px;	
  transition: all 1s;
  line-height:25px;
  border-radius:3px;
 }
.baner-web:hover,#baner-web-text
 {
  width:250px;
  height:200px;
  display:run-in;
 }

#baner-web-text
 {
  display:none;
 }

این هم کدهای HTML :

<div class="baner-web">

   طراحی سایت<br />
    <div id="baner-web-text">
   asaSas
   AS
   asASasASAsASasASAsAS asASasASAsASasASAsAS
    asASasASAsASasASAsAS
     asASasASAsASasASAsAS
      asASasASAsASasASAsAS
   </div>
 </div>

تشکر.

ویرایش شده در اسفند 92 توسط Payam.Hayati

[ابوالفضل طالبی 280]

اون div رو باید مخفی کنی یعنی :

visibility: hidden;

بعد باید با javascript این کارها رو انجام بدی:

کافی هست که تو رویداد onmouseover مربوط به تگ a همون منو ، یک تابع جاوا فراخوانی کنی

توی تابع جاوای خودت به همون div استایل زیر رو اعمال کن:

visibility: visible;