کد o-transition.moz-transition.ms-transition.webkit-transition

[Blood 23]

با سلام من از کد زیر برای کند کردن mouse hover روی یک div استفاده میکنم

-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;

وقتی بک گراند div از عکس استفاده میکنه دیگه وقتی موس میره روش اسلو نمیشه مشکل چیه؟

ویرایش شده اردیبهشت 93 توسط M.At

[imanfakhar 26231]

عکس فقط در نمایشگر های وب کیت این خاصیت رو قبول می کنه (سافاری و گوگل کروم) مگر اینکه background-size تغییر کنه

[Blood 23]

استاد فخار به نظر شما به چه صورت این منو رو درست کنم منوی آبی رنگ منظورم که در لینک زیر هست؟

http://www.templatemonster.com/demo/45593.html

منویی که مشاهده میکنید اول عکس هست وقتی با موس روی منو میریم بعد تبدیل به رنگ میشه و خیلی تقریبا اسلو هست به چه صورت این منو رو ایجاد کنم ؟

[imanfakhar 26231]

لینکگی که دادید همه منوهاش آبی بود ولی من متوجه عکس نشدم

برای تبدیل آهسته عکس به رنگ

.nav li {
height:45px;
background:#369 url('images/bg.png') repeat-x scroll left 0%;
background-size:auto 45px;
-moz-transition: all .3s ease-out; 
-o-transition: all .3s ease-out; 
-webkit-transition: all .3s ease-out; 
transition: all .3s ease-out; 
}
.nav li:hover {
background-position:left 100%;
background-size:auto 0px;

}

[Blood 23]

این منو رو منظورم هست استاد

و روی هر منو کلیک میکنید در هر صفحه که باشه رنگ منوی اون صفحه آبی پر رنگ میشه مثلا در صفحه BLOG باشیم رنگ منوی اون به آبی پر رنگ تبدیل میشه ؟ این عمل رو هم لطفا بگید باید چه کاری انجام بدم؟ ببینید من از اون کدی که دادیداستفاده کردم اما من میخوام به صورت اسلو شده عکس تغییر کنه منو رو خودتون مشاهده کنید متوجه میشید از اون کد استفاده کردم فقط در کروم نشون میده در فایر فاکس نمایش نمی ده به صورت اسلو در فایر فاکس باید دوتاشون رنگ باشن تا به صورت اسلو تغییر کنه این کدی که من استفاده میکنم

nav li > ul,
nav li > ol {
margin:0;
list-style: none;

}
.main-navigation {
float: right;
}
.main-navigation li {
float:right;
font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
font-size: 15px;
text-align:center;
color: #fff;
}
.main-navigation li.default-menu,
li.default-menu {
display: none;

}
.main-navigation a {
background: transparent url(images/Menu-Image.png) no-repeat top center;
background-color:#89D2FD;
width:189px;
float: right;
display: block;
line-height:70px;
margin: 0 0px 0 0px;

}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {
background: url(images/Menu-Image-hover.png) no-repeat top center;
background-color:#248FCA;
width:189px;
line-height:70px;
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;

}

ویرایش شده اردیبهشت 93 توسط M.At

[imanfakhar 26231]

http://cdpn.io/ucaxj

بستگی به نحوه استفاده شما داره و الا عمل می کنه

سئوال دومتون رو در تایپیک جدا بپرسید مبحثش کاملا جداست

[Blood 23]

این صفحه ای که شما دادید عمل میکنه؟ درسته آیا از کد من استفاده کردید؟ یا کدی که خودتون گداشته بودید؟ اما برای من به صورت اسلو نیست نمی دونم چرا؟ چه کاری باید انجام بدم تا بفهمم مشکل چیه؟

میشه این صفحه ای که دادی رو کدش رو قرار بدید؟ شاید من یک جا اشتباهی کردم که برای من به نمایش در نمی یاد

ویرایش شده اردیبهشت 93 توسط M.At

[imanfakhar 26231]

زیر صفحه روی editpen بزنید و کدها را ببینید با دو کد مختلف ساخته شده خط بالا با تصویره و خط پایین با کدهای css

https://gist.github.com/anonymous/05f98a05eec9701b2998