تغییر شکل دکمه موقع hover

[MOHCEN 3]

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

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

ویرایش شده آذر 92 توسط MOHCEN

[Parsa 23463]

یک نمونه

<div class="test">dad</div>
<style>
.test{background-color: #999}
.test:hover{background-color: #f00; border-radius: 5px}
</style>

[MOHCEN 3]

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

[imanfakhar 26231]

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

<img class="img" src="img.jpg">
<style>
.img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-moz-transition: all 1.8s linear .2s;
-o-transition:all 1.8s linear .2s;
-webkit-transition: all 1.8s linear .2s;
transition: all 1.8s linear .2s;
}
.img:hover { -webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
}
</style>

[MOHCEN 3]

الان این چرا جواب نمی ده؟

http://cdpn.io/jufhH

[Black_Sky 6349]

نمونه ساده:

http://jsbin.com/raweyuxa/1

[MOHCEN 3]

نه. می خوام عکس سیاه و سفید باشه وقتی موس می ره روش رنگی بشه

[Black_Sky 6349]

http://jsbin.com/raweyuxa/2

[MOHCEN 3]

میگم چیکار کنم این hover برای همه img های صفحه اعمال نشه. فقط برا یه عکس اعمال بشه؟

[Black_Sky 6349]

یک کلاب بسازسد و به تصاویر بدید و هاور اون کلاس به صورت زیر تعریف کنید:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; } img:hover{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%);
filter: none;
transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s;

[MOHCEN 3]

می شه این کد رو برای عکس background یه دایو هم استفاده کرد؟؟

[Alireza Xn 1644]

می شه این کد رو برای عکس background یه دایو هم استفاده کرد؟؟

بله میشه کلا این کد CSS3 برای فیلتر کردن رنگ ها هستش .