تغییر رنگ در hover css. تغییر تن رنگ آسان

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки - псевдокласс hover (о нем можно почитать

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами . Связано это с тем, что при реализации таких эффектов используется , который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1" , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

اگر با CSS آشنایی ندارید، اجازه دهید توضیح دهم که ورودی img.animate1: hover به مرورگر می گوید که برای همه عناصر داشتن یک صفت کلاس برابر با animate1 هنگامی که با نشانگر ماوس روی آنها می روید، اعمال می شود سبک های مشخص شده... سبک ها بین آنها مشخص شده است آکولاد(و). اگر همه چیز به درستی انجام شده باشد، باید چیزی شبیه به این باشد:

شما می توانید یک عکس در حالت اصلیشفاف، و آن را در حالت شناور مات کنید. سپس خطوط زیر را به فایل CSS اضافه کنید:

img.animate1 (
فیلتر: آلفا (Opacity = 25)؛
Opacity: 0.25;
}
img.animate1: شناور (

کدورت: 1;
}

نتیجه به این صورت خواهد بود:

برای جلوه بیشتر، می توانید تغییرات در شفافیت تصویر را کاهش دهید. برای این کار می توانید از ویژگی CSS transition استفاده کنید که افکت انتقال بین دو حالت یک عنصر را تنظیم می کند. برای مثال یک ثانیه کاهش سرعت را اضافه می کنیم. سپس کد CSS ما به صورت زیر در می آید:

img.animate1 (
فیلتر: آلفا (Opacity = 25)؛
Opacity: 0.25;
-moz-transition: همه 1 ها ease-in-out. / * جلوه انتقال برای فایرفاکس تا نسخه 16.0 * /
-webkit-transition: همه 1 ها ease-in-out. / * جلوه انتقال برای Chrome 26.0، Safari، Android و iOS * /
-o-transition: همه 1ها ease-in-out. / * جلوه انتقال برای Opera تا نسخه 12.10 * /
انتقال: همه 1ها ease-in-out; / * جلوه انتقال برای سایر مرورگرها * /
}
img.animate1: شناور (
فیلتر: آلفا (Opacity = 100)؛
کدورت: 1;
}

نتیجه:

از طريق تبدیل خواصتصویر را می توان مقیاس، چرخش، جابجا کرد، کج کرد. بیایید سعی کنیم تصویر را بزرگ کنیم. سپس کد css به این صورت خواهد بود:

img.animate1 (


- o-transition: همه 1 ها سهولت.
انتقال: همه 1 ها سهولت.
}
img.animate1: شناور (
- moz-transform: مقیاس (1.5)؛ / * تبدیل افکت برای فایرفاکس تا نسخه 16.0 * /
- webkit-transform: مقیاس (1.5)؛ / * جلوه تبدیل برای کروم تا نسخه 26.0، سافاری، اندروید و iOS * /
- o-transform: مقیاس (1.5)؛ / * افکت تبدیل برای Opera تا نسخه 12.10 * /
- ms-transform: مقیاس (1.5)؛ / * جلوه تبدیل برای IE 9.0 * /
تبدیل: مقیاس (1.5); / * جلوه تبدیل برای سایر مرورگرها * /
}

و نتیجه به این صورت خواهد بود:

می توانید یک چرخش به بزرگنمایی تصویر اضافه کنید. سپس سبک های cssکمی تغییر دهید:

img.animate1 (
- moz-transition: همه 1 ها سهولت.
- webkit-transition: همه 1 ها سهولت.
- o-transition: همه 1 ها سهولت.
انتقال: همه 1 ها سهولت.
}
img.animate1: شناور (
- moz-transform: مقیاس چرخشی (360 درجه) (1.5)؛
- webkit-transform: مقیاس چرخش (360 درجه) (1.5)؛
- o-transform: مقیاس چرخشی (360 درجه) (1.5)؛
- ms-transform: مقیاس چرخشی (360 درجه) (1.5)؛
تبدیل: چرخش (360 درجه) مقیاس (1.5)؛
}

نتیجه:

در بالا مواردی را در نظر گرفته ایم که یک عکس در انیمیشن نقش داشته باشد. بعدی را در نظر بگیرید روش هایی برای جایگزینی یک تصویر با تصویر دیگر... در این حالت معمولاً دو تصویر هم اندازه تهیه می شود: یکی برای نمای اصلی، دیگری برای جایگزینی آن.

فرض کنید دو عکس داریم، یکی سیاه و سفید و دیگری رنگی:

اجازه دهید آن را طوری بسازیم که وقتی ماوس را روی آن نگه دارید تصویر سیاه و سفیدرنگی نمایش داده می شود برای انجام این کار، تصویر اصلی را با استفاده از ویژگی پس زمینه، پس‌زمینه عنصر div می‌کنیم. و هنگامی که ماوس را روی تصویر با مکان نما نگه دارید، تغییر خواهیم کرد تصویر پس زمینهبا استفاده از همان hover pseudo-class و ویژگی پس زمینه. برای تحقق بخشیدن به این اثر در صفحه htmlاضافه کردن عنصر divبا کلاس rotate1:

و توضیحات سبک زیر را اضافه کنید:

div.rotate1 (
پس زمینه: url (img / 2.jpg)؛ / * مسیر فایل با طرح اصلی * /
عرض: 480 پیکسل؛ / * عرض تصویر * /
ارتفاع: 360px; / * ارتفاع تصویر * /
}
div.rotate1: شناور (
پس زمینه: url (img / 1.jpg)؛ / * مسیر فایل با تصویر جایگزین شده * /
}

و نتیجه این است:

این روش یکی دارد ضرر قابل توجه... از آنجایی که تصویر دوم تنها زمانی بارگذاری می شود که نشانگر ماوس روی آن قرار گرفته باشد، اگر کاربر اتصال اینترنت کندی داشته باشد و اندازه فایل همراه با تصویر سایز بزرگ، تصویر با کمی مکث نمایش داده می شود. بنابراین، در زیر چند روش دیگر برای جایگزینی تصاویر در شناور در نظر خواهیم گرفت.

روش بعدی بر اساس ترکیب دو تصویر در یک فایل خواهد بود. فرض کنید باید دکمه ای را روی صفحه قرار دهیم که وقتی نشانگر ماوس روی آن قرار می گیرد، نمای آن تغییر می کند. برای انجام این کار، دو تصویر را در یک فایل ترکیب کنید و تصویر حاصل چیزی شبیه به این خواهد شد:

در این حالت، تغییر از یک الگو به الگوی دیگر با جابجایی انجام خواهد شد تصویر پس زمینهبه صورت عمودی با استفاده از ویژگی background-position. از آنجایی که وقتی روی دکمه کلیک می کنید، معمولاً انتقال به صفحه دیگری اتفاق می افتد، سپس تصویر را در عنصر قرار می دهیم< a>... سپس کد زیر را در صفحه html وارد کنید:

و در فایل css به این صورت:

a.rotate2 (
پس زمینه: url (img / button.png)؛ / * مسیر فایل با طرح اصلی * /
نمایش: بلوک؛ / * پیوند به عنوان عنصر بلوک */
عرض: 50 پیکسل؛ / * عرض تصویر بر حسب پیکسل * /
ارتفاع: 30 پیکسل؛ / * ارتفاع تصویر * /
}
a.rotate2: شناور (
موقعیت پس زمینه: 0 -30 پیکسل. / * پس زمینه افست * /
}

نتیجه:

و آخرین راه برای امروز زمانی است که یک تصویر با استفاده از موقعیت: قانون css مطلق در زیر تصویر دیگر قرار می گیرد. در این مورد، دو تصویر را در یک ظرف div قرار می دهیم:

و استایل های css را اضافه کنید:

انیمیشن 2 (
موقعیت: نسبی;
حاشیه: 0 خودکار؛ / * مجموعه بلوک divمرکز صفحه * /
عرض: 480 پیکسل؛ /*عرض*/
ارتفاع: 360px; /* قد */
}
.animate2 img (
موقعیت: مطلق; / * موقعیت یابی مطلق*/
سمت چپ: 0; / * تصاویر را به سمت چپ تراز کنید گوشه بالا div * /
بالا: 0; / * تصاویر را در سمت چپ بالا تراز کنید گوشه تقسیم */
}

پس از افزودن قوانین css، تصاویر یکی زیر دیگری قرار خواهند گرفت. اکنون شفافیت تصاویر را با ویژگی های کدورتدر حالت عادی، تصویر دوم را نشان خواهیم داد و زمانی که مکان نما روی تصویر اول قرار می گیرد. برای انجام این کار، در حالت عادی، تصویر را با کلاس اول کاملاً شفاف می کنیم و وقتی مکان نما معلق است، برعکس: تصویر با کلاس دوم کاملاً شفاف و با کلاس اول غیر شفاف خواهد بود:

Animate2 img.first (/ * تصویر اول کاملا شفاف است * /
کدورت: 0;
فیلتر: آلفا (تاری = 0)؛
}
.animate2: hover img.first (/ * در شناور، تصویر اول مات می شود * /
کدورت: 1;
فیلتر: آلفا (تاری = 100)؛
}
/ * و دومی با شناور شفاف می شود * /
کدورت: 0;
فیلتر: آلفا (تاری = 0)؛
}

نتیجه:

شما می توانید با افزودن یک ویژگی انتقال CSS به آخرین قانون، به یک انتقال صاف دست پیدا کنید:

Animate2: شناور img.second، .animate2 img.second: شناور (
کدورت: 0;
فیلتر: آلفا (تاری = 0)؛
-moz-transition: همه 2s ease.
-webkit-transition: همه 2s ease.
-o-transition: همه 2s ease.
انتقال: همه 2 ها سهولت.
}

و نتیجه این است:

و اگر خاصیت transform را اضافه کنیم:

Animate2: شناور img.second، .animate2 img.second: شناور (
کدورت: 0;
فیلتر: آلفا (تاری = 0)؛
-moz-transform: مقیاس (0، 1)؛
-webkit-transform: مقیاس (0، 1)؛
-o-transform: مقیاس (0، 1)؛
-ms-transform: مقیاس (0، 1)؛
تبدیل: مقیاس (0، 1)؛ / * عرض تصویر را به 0 کاهش دهید * /
}

اینطور معلوم می شود:

با ترکیب کردن CSS های مختلفخواص را می توان در موارد مختلف به دست آورد جلوه های شناورهنگام تغییر تصاویر در حین شناور ماوس... این و نمونه های دیگر را در این صفحه قرار داده ام که می توانید منابع را نیز دانلود کنید. این همه، تا زمانی که دوباره ملاقات کنیم.

استفاده و مدیریت سبک ها با با استفاده از جاوا اسکریپتبه شما امکان می دهد ظاهر یک سلول را "در حال پرواز" تغییر دهید، زمانی که شرایط خاصی وجود دارد، مانند شناور کردن روی یک پیوند یا خود سلول.

بیایید ساده ترین تکنیک را در نظر بگیریم - رنگ پس زمینه یک سلول زمانی که نشانگر ماوس روی آن قرار می گیرد تغییر می کند.

حرکت ماوس بر روی منطقه توسط رویداد onMouseOver ردیابی می شود، و ماوس خارج از منطقه توسط رویداد onMouseOut ردیابی می شود. از آنجایی که رنگ پس زمینه برای همان سلولی که ماوس را روی آن قرار می دهیم تغییر می کند، تغییر استایل با استفاده از روش this.style.background انجام می شود.

مثال از تغییر استفاده می کند خاکستریپس زمینه به نارنجی این روش در مرورگر Netscape 4.x کار نمی کند.

همچنین می‌توانید با کلیک کردن نه بر روی پیوند، بلکه روی سلول جدول، به سند دیگری انتقال دهید. سپس کل سلول به یک پیوند تبدیل می شود و نه فقط متن داخل آن. لازم به ذکر است که این روش بهترین نیست، به دلیل واضح نبودن آن، بازدیدکنندگان وب سایت به این موضوع عادت کرده اند که وقتی ماوس را روی یک لینک قرار می دهند، مکان نما ماوس به یک عقربه تبدیل می شود. با استفاده از CSS، می توانید ظاهر نشانگر ماوس را لغو کنید، اما این ویژگی فقط برای مرورگر در دسترس است. اینترنت اکسپلورر.

برای تغییر رنگ یک سلول تنها زمانی که ماوس را روی پیوندی در داخل آن قرار می دهید، باید از طریق نام سلول به ویژگی های آن مراجعه کنید. به طوری که برنامه بداند کدام ویژگی سلول را تغییر دهد، از آن استفاده می شود شناسه پارامترکه به طور منحصر به فرد مورد را شناسایی می کند.

برای راحتی، تغییر رنگ یک سلول به عنوان عملکردهای جداگانه طراحی شده است. به واسطه مرورگرهای اینترنتاستفاده از Explorer، Netscape و Opera رویکردهای مختلفبرای تغییر پویا سبک یک عنصر، در توابع نشان داده شده در مثال 3، رنگ پس زمینه به دو صورت تغییر می کند. هر مرورگر خط مناسبی را برای خود انتخاب می کند و بقیه موارد نادیده گرفته می شود.