ورود

View Full Version : درخواست یک خصوصیت برای Hover در li



heidarymh73
پنج شنبه 19 اردیبهشت 1392, 01:07 صبح
من یه کد به شکل زیر نوشتم


<ul>
<li class="lisubject"><a href="#">test</a></li>
<li class="lisubject"><a href="#">test</a></li>
<li class="lisubject"><a href="#">test</a></li>
<li class="lisubject"><a href="#">test</a></li>
<li class="lisubject"><a href="#">test</a></li>
<li class="lisubject"><a href="#">test</a></li>
</ul>

و در CSS اون رو به طور زیر مقدار دهی کردم

.lisubject{
font-size:12px;
list-style:none;
padding:0 10px 0 0;
}
.lisubject a{
color:rgb(111, 2, 155);
text-decoration:none;
line-height:25px;
background: url(images/Bullet1.png) no-repeat;
background-position: right;
padding-right: 13px;
font-size: 11px;
}
.lisubject a:hover{
color:rgba(0, 31, 255, 0.44);
background:url(images/Bullet2.png) no-repeat;
background-position: right;
padding-right: 13px;
background-color: rgba(154, 247, 36, 0.32);
padding: 4px 15px 7px 15px;
border-radius: 5px;
}

اما میخوام در Hover که نوشتم وقتی رنک بکگراند تغییر میکنه به اهستگی این کار انجام بشه و وقتی محو میشه هم به اهستگی محو بشه
خصوصیت های زیر رو امتحان کردم اما شد ولی اون چیزی که بالا توضیح دادم و میخوام نشد

-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

مشکل دیگه ای هم که دارم این کد ها که در بالا هست اضافه میکنم پوزیشن رو هم کم و زیاد میکنه یه مقدار کم.یه لرزش یه مقدار حرکت !
ممنون میشم از دوستان اگر کد مورد نظر بنده رو بزارند و راهنمایی کنند

qartalonline
پنج شنبه 19 اردیبهشت 1392, 06:46 صبح
خاصیت transition برای تغییر حالت پس زمینه رنگی عنصر به کار میرود . یعنی اگه شما از عکس برای پس زمینه استفاده کنید transition برای تغییر عکس پس زمینه بی تاثیر خواهد بود.

heidarymh73
پنج شنبه 19 اردیبهشت 1392, 12:02 عصر
نه کد هایی که بالا نوشتم عینا همون کدی هست که استفاده کردم
رنگ رو میخوام عوض کنم
یعنی کسه دیگری نیست جواب بده ؟

زینب فاطمی
سه شنبه 24 اردیبهشت 1392, 18:09 عصر
سلام
اینو در قسمت hover امتحان کنید . هر چقدر زمان رو بالاتر بدید آهسته تر تبدیل میشه .
-webkit-transition: color 3s;
-moz-transition: color 3s ;
transition: color 3s;